Flexbox 中自动外边距的工作原理

Robin 之前已经介绍过这个话题，但是我在过去几周里听到了一些关于它的困惑，并且看到了 其他人尝试解释它，我想加入这场讨论。

假设您有一个 Flex 容器，其中包含一些未填充整个区域的 Flex 项目。

查看 Chris Coyier 的 CodePen
ZEYLVEX (@chriscoyier)
在 CodePen 上。

现在我想将“菜单”项目推到最右边。这就是自动外边距发挥作用的地方。如果我在它上面设置 margin-left: auto;，它将尽可能地向该行右侧推。

查看 Chris Coyier 的 CodePen
WNbRLbG (@chriscoyier)
在 CodePen 上。

实际上，您可以考虑改为使用 margin-inline-start: auto; 并开始在所有地方使用 逻辑属性，以便在您需要更改方向时做好准备。

查看 Chris Coyier 的 CodePen
gObgZpb (@chriscoyier)
在 CodePen 上。

此外，请注意，只要有空间可以推，自动外边距就可以在两个方向上工作。在这个例子中，使菜单向下移动的不是对齐方式，而是自动外边距。

查看 Chris Coyier 的 CodePen
XWJpobE (@chriscoyier)
在 CodePen 上。