Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
1. 网页布局
传统网页布局基于盒状模型，通过display+position+float三个属性实现，它不容易实现比如垂直居中等。
Flex 布局可以简便、完整、响应式地实现各种页面布局。
2. Flex布局基本概念
- flex container：flex容器，采用flex布局的元素；
- flex item：flex项目，flex容器中的所有子元素都可以成为flex item；
3. 容器的属性
- flex-direction：决定主轴的方向，选项有row, row-reverse, column, column-reverse；
- flex-wrap: 定义换行方式，选项有nowrap, wrap, wrap-reverse；
- flex-flow：flex-direction和flex-wrap的简写形式，比如flex-flow: column wrap;
-
justify-content：确定在主轴上的对齐方式，包括flex-start, flex-end, center, space-between, space-around；
justify-content -
align-items：定义项目在交叉轴上如何对齐，包括flex-start, flex-end, center, baseline, stretch(默认值)；
align-items - align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用；
4. 项目的属性
- order：项目排列顺序，默认为0，数字越小排列越向前；
- flex-grow：项目的放大比例，默认为0；
- flex-shrink：项目的缩小比例，默认为1；
- flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小；
- flex：flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto；
- align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；
