1. 前言
为元素设置 display: flex 或者 display: inline-flex flex 布局即创建。直接设置 display: flex 或者 display: inline-flex 的元素称为 flex 容器，里面的子元素称为 flex 子项。flex 以及 inline-flex 的区别类似于 block 和 inline-block，一个是块状元素一个是行内元素。
flex 布局相关的属性正好分为两类，一类作用在 flex 容器上，另一类作用在 flex 子项上：
| 作用在 flex 容器上 | 作用在 flex 子项上 |
|---|---|
| flex-direction | order |
| flex-wrap | flex-grow |
| flex-flow | flex-shrink |
| justify-content | flex-basis |
| align-items | flex |
| align-content | align-self |
无论作用在 flex 容器上，还是作用在 flex 子项，都是控制的 flex 子项的呈现，只是前者控制的是整体，后者控制的是个体。
2. flex 属性
flex 属性是 flex-grow，flex-shrink 和 flex-basis 这 3 个 CSS 属性的缩写。默认值为 initial，具体为 flex: 0 1 auto。
3. flex 属性缩写
| 缩写 | 等同于 | 说明 |
|---|---|---|
flex: initial |
flex: 0 1 auto |
初始值，常用。不增长可缩小，可自动换行 |
flex: none |
flex: 0 0 auto |
推荐。不增长不缩小，不换行 |
flex: 1 |
flex: 1 1 0% |
推荐。可增长可缩小，优先最小尺寸 |
flex: auto |
flex: 1 1 auto |
适用场景少。可增长可缩小，优先最大尺寸 |
flex: 0 |
flex: 0 1 0% |
适用场景少。不增长可缩小，始终换行 |
4. flex-basis
在 flex 布局中，一个子项的宽度由元素的基础尺寸（width/flex-basis），增长或缩小（flex-grow/flex-shrink），最大最小尺寸限制（min-width/max-width/min-content）三者共同决定。
有关 flex 布局可以参考之前的文章 Flex 布局。
