自动边距对齐

注意使用 margin: auto 在弹性项目上的对齐效果。

当你在弹性项目上使用 margin: auto 时，结果可能看起来很奇怪。你必须理解其背后的原理，否则可能会导致意外的结果。我将详细解释这一切。

当你在弹性项目上设置 margin: auto 时，其值为 auto 的方向（左、右或两边）会自动占据任何可用的空白空间。

这一点很容易被忽略。我来具体说明一下：

考虑下面这个导航栏的 HTML 和 CSS 代码：

1<ul>
2  <li>品牌</li>
3  <li>首页</li>
4  <li>服务</li>
5  <li>关于</li>
6  <li>联系</li>
7</ul>

1ul {
2  display: flex;
3}
4li {
5  flex: 0 0 auto;
6}

当前的效果如下：

这里有几点需要注意，请仔细听：

1. flex-grow 被设为 0，这解释了为什么列表项不会扩展。

2. 弹性项目默认沿主轴起点对齐（即默认行为）。

3. 由于项目靠主轴起点对齐，右侧留出了额外的空间。你看到了吗？

现在给第一个列表项（品牌）添加 margin-right: auto，看看会发生什么。

1li:nth-child(1) {
2  margin-right: auto; /* 仅应用于右侧 */
3}

发生了什么？原本存在的空白空间现在全部被分配到了第一个弹性项目的右侧。

记住我之前说的：当在弹性项目上使用 margin: auto 时，其值为 auto 的方向（左、右或两边）会自动占据所有可用的空白空间。
这并不只限于单侧。如果你希望弹性项目在两侧都实现 auto 边距对齐呢？

1/* 可以使用简写形式同时设置左右两边 */
2li:nth-child(1) {
3  margin-left: auto;
4  margin-right: auto;
5}

现在，空白空间被均匀分配到了弹性项目的左右两侧。

那么，这种酷炫的自动边距对齐是否有代价？确实有。如果不注意，它可能会带来困扰。

当你在弹性项目上使用自动边距对齐时，justify-content 属性将不再对弹性项目起作用——它完全失效。

例如，尝试通过 justify-content 设置不同的对齐方式，但对布局没有任何影响。

1ul {
2  justify-content: flex-end;
3}

实际应用场景

导航栏是每个网站或应用中非常重要的组成部分。几乎全球所有的网站都有某种形式的导航系统。

来看看这些知名网站是如何设计它们的导航系统的。你是否发现 Flexbox 能让你更高效地构建这类布局？再仔细观察一下，自动边距功能在哪些地方特别有用。

1. 使用 Bootstrap 风格的导航

1. AirBnB 桌面端导航

1. Twitter 桌面端导航

如果你感觉准备好了，建议你动手写代码。试着自己实现这些导航系统。你现在已经有足够的知识了，只需要一点勇气开始编写即可。

下节课见！希望你已经完成了导航系统练习 :-)