弹性布局

1. 概述
   弹性布局理解为在一个容器中，所有子元素按照规则排列展示，所有的子元素称为“项目”，容器本身存在主轴（水平方向）和交叉轴（垂直方向）

2. 容器属性

flex-direction                   主轴项目排列方向
flex-wrap                         换行方式
flex-flow                           flex-direction和flex-wrap的简写形式
justify-content                  主轴对齐方式
align-items                       交叉轴对齐方式
align-content                    多根轴线的对齐方式（只有一根轴线不起作用）

3. 内部项目属性

order                    项目排列顺序
flex-grow              项目放大比例
flex-shrink             项目缩小比例
flex-basic              分配多余空间前，项目的主轴空间
flex                        flex-grow、flex-shrink和flex-basic的简写
align-self               单个项目的对齐方式