Css Flexbox，同一条线的不同路线

根据规范和一些博客，“align self”覆盖其父项的“align items”属性。在这个例子中，我使用了flex-direction:column，因为align-self仅适用于横轴。我没能去掉多余的空白。我知道我可以把每个li作为一个容器，并在其中对齐项目，但如果可能的话，我真的在尝试不创建更多容器的情况下解决

最后一项很好地与结尾对齐，但第一项和最后一项之间的所有内容几乎都像“空格”，但我意识到它实际上是一列，迫使每个项目进行换行。如果删除任何对齐属性，则列和柔性换行的组合将导致项目“分布”。这可能是flexbox规范的一个限制。。。但我不确定

*{框大小：边框框；}
保险商实验室{
列表样式类型：无；
填充：0；
显示器：flex；
调整项目：灵活启动；
边框：1px纯黑；
李{
显示器：flex；
证明内容：中心；
宽度：100px；
右边框：1px纯黑；
&：最后一种{
自对准：柔性端；
}
}
}

试验
试验
试验

像这样吗。。。切换到

flex-direction:column

以使此布局工作是不必要的。您可以使用

auto

margins实现行方向的布局，如@LGSon所示。这里有一个。但是您在列方向上遇到问题的原因与

align self

或

align items

无关。由于您在多行flex容器中工作（即应用了

flex wrap:wrap

），因此控制横轴对齐的属性是

align content

。这是一个答案。非常感谢所有伟大的答案！就在你认为你了解flexbox的时候…：DFlex不能那样做，@LGSon。交叉轴中的此类对齐没有关键字对齐属性。和

auto

页边距将在其列内工作，而不是跨容器工作。您必须使用绝对定位。