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

编辑:如果项目紧密对齐，添加弯曲-收缩:10是个好主意;到额外的元素，以及，所以布局将正确响应较小的设备。

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

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

这里似乎没有justification -self，但你可以通过设置适当的margin to auto¹来达到类似的结果。例如，对于flex-direction: row(默认)，您应该设置margin-right: auto以使子元素向左对齐。

.container { 身高:100 px; 边框:实心10px天蓝; 显示:flex; justify-content: flex-end; ｝ .block { 宽度:50 px; 背景:番茄; ｝ .justify-start { margin-right:汽车; ｝ < div class = "容器" > <div class="block justify-start">justify-start</div> . < div class = "块" > < / div > < / div >

¹此行为由Flexbox规范定义。

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

.space-between { 边框:1px纯红色; 显示:flex; justify-content:之间的空间; ｝ .default-flex { 边框:1px纯蓝色; 显示:flex; ｝ .child { 宽度:100 px; 身高:100 px; 边框:1px实体; ｝ < div class = "空间" > < div class = "孩子" > < / div > 1 < div class = " default-flex”> < div class = "孩子" > < / div > 2 < div class = "孩子" > 3 < / div > 4 < div class = "孩子" > < / div > < div class = "孩子" > < / div > 5 < / div > < / div >

或者如果你用flex-start和flex-end做同样的事情，你只是交换了default-flex容器和lone child的顺序。

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

为了扩展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>