如何证明一个单一的flexbox项目(覆盖justify-content)

小开

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

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

小开

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

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

小开

最佳答案

似乎没有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>

¹这个行为是由Flexbox规范定义。

小开

如果您实际上没有限制将所有这些元素都作为兄弟节点保存，您可以将一起使用的元素包装在另一个默认的伸缩盒中，并让两者的容器使用空格。

.

.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做同样的事情，你只是交换了default-flex容器和lone child的顺序。

小开

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

小开

为了扩展Pavlo的答案https://stackoverflow.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>