Flexbox
::: theorem 本章概要 ❑ 弹性容器和弹性元素
❑ 主轴和副轴
❑ Flexbox 里的元素大小
❑ Flexbox 里的元素对齐
:::
Flexbox 的原则
- 给元素添加
display: flex，该元素变成了一个弹性容器（flex container） ，它的直接子元素变成了弹性子元素（flex item） - 弹性子元素默认是在同一行按照从左到右的顺序并排排列
- 弹性容器像块元素一样填满可用宽度，但是弹性子元素不一定填满其弹性容器的宽度
- 弹性子元素高度相等，该高度由它们的内容决定
在本例中，弹性容器应该是无序列表 <ul>。它的子元素，即列表项 <li> 就是弹性子元素。
弹性盒子内的 auto 外边距会填充所有可用空间。
弹性子元素的大小
前面的代码使用外边距给弹性子元素设置了间距。你可以用 width 和 height 属性设置它们大小，但是比起 margin、width、height 这些常见属性，Flexbox 提供了更多更强大的选项。
flex 属性控制弹性子元素在主轴方向上的大小（在这里指的元素的宽度）。代码清单 5-6 将给网页的主区域应用弹性布局，并使用 flex 属性控制每一列的大小。
flex 属性是三个不同大小属性的简写：flex-grow、flex-shrink 和 flex-basis。在代码清单 5-7 里，只提供了 flex-grow 的值，剩下的两个属性是默认值（分别是 1 和 0%），因此 flex: 2 等价于 flex: 2 1 0%。通常首选简写属性，但也可以分别声明三个属性。
与大部分简写属性不一样，如果在 flex 中忽略某个子属性，那么子属性的值并不会被置为初始值。相反，如果某个子属性被省略，那么 flex 简写属性会给出有用的默认值：flex-grow 为 1、flex-shrink 为 1、flex-basis 为 0%。这些默认值正是大多数情况下所需要的值。
每个子元素的 flex-shrink 值代表了它是否应该收缩以防止溢出。如果某个子元素为 flex-shrink: 0，则不会收缩；如果值大于 0，则会收缩至不再溢出。按照 flex-shrink 值的比例，值越大的元素收缩得越多。
弹性方向
对齐、间距等细节
值得注意的地方
总结
- 全局重置盒尺寸
- 全局外边距，通过猫头鹰选择器，只给容器内从第二个开始往后的子元素添加
margin-top，即容器内第一个子元素不设置margin-top。这样设置之后，外边距只存在于上下排列的 子元素之间 - 双容器，用于网页内容居中。外层容器是
body，内层窗口是.container，并将外边距margin设置为auto - 更棒的是，Flexbox 允许使用
margin: auto来填充弹性子元素之间的可用空间。弹性盒子内的auto外边距会填充所有可用空间