为什么灵活项目 A 在容器设置为margin: 0 auto时占据容器的整个宽度？
.container {
display: flex;
flex-direction: column;
}
.a {
margin: 0 auto;
border: 1px solid red;
}
.b {
border: 1px solid blue;
}<div class="container">
<div class="a">A</div>
<div class="b">B</div>
</div>
答案 0 :(得分：3)
这就是flexbox布局算法的工作原理。在这种情况下，以下适用：
Flexible Box Layout Module - 8.1. Aligning with auto margins
弹性项目的自动边距效果与块流程中的自动边距非常相似：
在计算弹性基座和弹性长度时，自动边距被视为0。
在通过
justify-content和align-self进行对齐之前，任何正的可用空间都会分配到该维度中的自动边距。
在您的情况下，您看到元素两侧的自由空间均匀分布。以下是布局算法的另一点：
9. Flex Layout Algorithm - 9.5. Main-Axis Alignment
分配任何剩余的可用空间。对于每个柔性线： 如果剩余的可用空间为正，并且此行上至少有一个主轴边距为auto，则在这些边距之间平均分配可用空间。否则，将所有自动边距设置为零。 每个对齐内容沿着主轴对齐项目。