Flexbox：与自动边距对齐

注意：这是我的 Flexbox30 系列的精简转发。本系列文章要求读者具备 Flexbox 的相关知识。所以，如果你是 Flexbox 新手，我建议你先去看看这个系列文章 (链接)。没错，这是一门免费课程 😄

您了解到 align-self 可以控制子项在横轴上的对齐方式。您的下一个问题可能是“主轴上有没有类似的属性，比如说“justify-self”🤔 好问题！很遗憾，答案是否定的😅。但我们有一个现成的 CSS 属性可以使用！那就是自动边距。我们可以用它来控制特定元素的水平对齐方式。

实际上，您还可以使用自动边距来控制特定元素的垂直对齐。

如果你将所有边距（左、右、上、下）都设置为简写边距，实际上你就把这个子元素在水平和垂直方向上都居中了！

自动边距示例

以下是一些自动边距真正发挥作用的例子！导航栏的布局风格随心所欲，效果非常棒🤩

我敢打赌，你现在肯定头晕目眩，不知道该用哪个，什么时候用什么（选择的问题，我说得对吗？）😅。以下是我的做法：

理由是什么？我认为 Flexbox 属性比“自动边距”更直观，也更清晰易懂。试一下：



.child {
  align-self: flex-end;
}

对比



.child {
  margin-top: auto;
}

即使你对 Flexbox 一无所知，只要读一下这段代码，你就能知道child是对齐到末尾的。然而margin-top: auto，的具体样子你却有点摸不着头脑。当然，这只是我的建议。你可以自由选择适合你和你团队的方式😊

感谢阅读❤
打个招呼！Instagram | Twitter | Facebook |博客| SamanthaMing.com