如何证明单个弹性框项目（覆盖 justify-content）[重复]

Posted 2023-03-06

【中文标题】如何证明单个弹性框项目（覆盖 justify-content）[重复]

【英文标题】：How to justify a single flexbox item (override justify-content) [duplicate]

【发布时间】：2014-06-30 13:27:03

【问题描述】：

您可以用align-self 覆盖align-items 以用于弹性项目。 我正在寻找一种方法来覆盖 justify-content 的弹性项目。

如果您有一个带有justify-content:flex-end 的flexbox 容器，但您希望第一项是justify-content: flex-start，那该怎么做？

【问题讨论】：

使用auto 边距。请参见此处的框 #26：***.com/a/33856609/3597276

【参考方案1】：

似乎没有justify-self，但您可以通过适当的margin 到auto¹ 来实现类似的结果设置。例如。对于flex-direction: row（默认），您应该设置margin-right: auto 使子元素向左对齐。

.container 
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;

.block 
  width: 50px;
  background: tomato;

.justify-start 
  margin-right: auto;

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

¹这种行为是defined by the Flexbox spec。

【讨论】：

这项技术非常出色，它也适用于垂直方向。例如，您希望固定高度容器内的最后一个元素粘在底部。您可以使用 ``` .container flex-direction: column; justify-content: flex-start .last-item margin-top: auto ```

@krulik 此行为由 Flexbox 规范定义，请参阅 w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

经过更多调查，justify-self 可能与flexbox 没有任何关系，而是与css grids 一起使用，但我不确定。我似乎无法让它在带有 flexbox 的 Chrome 中工作。

如果我想让一个项目在左边，另一个在中间怎么办？

“在 flexbox 布局中，此属性被忽略”——取自 justify-self 上的 mozilla 文档

【参考方案2】：

AFAIK 在规范中没有属性，但这是我一直在使用的一个技巧： 将容器元素（带有display:flex 的元素）设置为justify-content:space-around 然后在第一项和第二项之间添加一个额外元素并将其设置为flex-grow:10（或其他适用于您的设置的值）

编辑：如果项目紧密对齐，最好也将flex-shrink: 10; 添加到额外元素，这样布局将在较小的设备上正确响应。

【讨论】：

它确实可以在没有指定宽度的情况下工作（至少在我的情况下是这样）

试试min-width: 0

【参考方案3】：

如果您实际上并不局限于将所有这些元素保留为兄弟节点，您可以将一起使用的元素包装在另一个默认的弹性盒子中，并让两者的容器都使用 space-between。

.space-between 
  border: 1px solid red;
  display: flex;
  justify-content: space-between;

.default-flex 
  border: 1px solid blue;
  display: flex;

.child 
  width: 100px;
  height: 100px;
  border: 1px solid;

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

或者，如果您对 flex-start 和 flex-end reversed 做同样的事情，您只需交换 default-flex 容器和孤子的顺序。

【参考方案4】：

对于那些你想要flex-end的项目的宽度已知的情况，你可以将它们的flex设置为“0 0 ##px”，然后用flex:1将你想要的项目设置为flex-start

这将导致伪 flex-start 项目填充容器，只需将其格式化为 text-align:left 或其他。

【参考方案5】：

我通过将内部项目的样式设置为 margin: 0 auto 解决了类似的情况。 情况：我的菜单通常包含三个按钮，在这种情况下它们需要是justify-content: space-between。但是当只有一个按钮时，它现在将居中而不是左对齐。

【参考方案6】：

要扩展 Pavlo 的答案 https://***.com/a/34063808/1069914，您可以在其行为中包含多个子项 justify-content: flex-start，但最后一项是 justify-content: flex-end

.container 
  height: 100px;
  border: solid 10px skyblue;
  display: flex;
  justify-content: flex-end;


.container > *:not(:last-child) 
    margin-right: 0;
    margin-left: 0;


/* set the second to last-child */
.container > :nth-last-child(2) 
    margin-right: auto;
    margin-left: 0;


.block 
  width: 50px;
  background: tomato;
  border: 1px solid black;

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block" style="width:150px">I should be at the end of the flex container (i.e. justify-content: flex-end)</div>
</div>