您可以覆盖align-items有align-self一个弯曲的项目。我正在寻找一种方法来替代justify-content弹性项目。
如果您有一个带有的flexbox容器justify-content:flex-end，但是您希望第一个项目为justify-content: flex-start，那该怎么办呢？
最好的答案是这个帖子：https : //stackoverflow.com/a/33856609/269396
如何证明单个flexbox项的正当性（覆盖正当性内容）
第3404篇《如何证明单个flexbox项的正当性（覆盖正当性内容）》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共6个回答
对于您做的项目宽度要将这些情况flex-end是已知的，你可以自己挠设置为“0 0 ## PX”，并设置你想要的项目flex-start与flex:1
这将导致伪flex-start项目填充容器，只需将其格式化为text-align:left或其他格式即可。
好像justify-self即将要进入浏览器。在MDN上已经有一篇文章。在撰写本文时，浏览器支持不佳。
关于边距解决方案：我有一个带间隙的Flexbox网格。flex-gapFlexbox 没有属性（尚未？）。因此，对于装订线，我正在使用填充和边距，因此margin: auto需要覆盖其他边距...
通过将内部项目的样式设置为，我解决了类似的情况margin: 0 auto。
情况：我的菜单通常包含三个按钮，在这种情况下，必须为justify-content: space-between。但是，当只有一个按钮时，它现在将居中对齐而不是向左对齐。
如果您实际上并不局限于将所有这些元素都保留为兄弟节点，则可以将这些元素包装在另一个默认的flex框中，并使两者的容器之间都使用空格。
.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容器和独生子的顺序即可。
似乎没有要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>¹ This behaviour is defined by the Flexbox spec.
相似问题
问题类别
AFAIK在规范中没有针对该属性的属性，但是这是我一直在使用的一个技巧：将容器元素（带有的容器元素
display:flex）设置为，justify-content:space-around然后在第一项和第二项之间添加一个额外的元素并将其设置为flex-grow:10（或一些与您的设置配合使用的其他值）编辑：如果项目紧密对齐，则最好也添加
flex-shrink: 10;到额外元素，因此布局将在较小的设备上正确响应。