CSS flex 笔记
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 属性缩写
缩写 | 等同于 | 说明 |
|---|---|---|
|
| 初始值，常用。不增长可缩小，可自动换行 |
|
| 推荐。不增长不缩小，不换行 |
|
| 推荐。可增长可缩小，优先最小尺寸 |
|
| 适用场景少。可增长可缩小，优先最大尺寸 |
|
| 适用场景少。不增长可缩小，始终换行 |
4. flex-basis
在 flex 布局中，一个子项的宽度由元素的基础尺寸（width/flex-basis），增长或缩小（flex-grow/flex-shrink），最大最小尺寸限制（min-width/max-width/min-content）三者共同决定。
有关 flex 布局可以参考之前的文章 Flex 布局。
