弹性盒模型

        弹性盒模型用于页面要适应不同屏幕大小时确保元素有恰当的布局方式，能够更有效地对子元素进行排列、对齐和分配空白空间。
使用方法：
  第一步：在父元素中添加display：flex或display：inline-flex
  第二步：在父元素中添加子元素布局的方式：

  flex-direction属性：主轴的方向，默认为row，即水平方向，起点在左。

- `row` ，默认值，水平主轴，起点在左；
- `row-reverse`，水平主轴，起点在右；
- `column`，垂直主轴，起点在上；
- `column-reverse`，垂直主轴，起点在下。

  flex-wrap属性：子元素主轴摆放不下的时候，项目换不换行，默认不换行。

- `none` ，默认值，不换行；（摆放不下按比例缩放）
- `wrap`，换行，第一排在最前；
- `wrap-reverse`，换行，最后一排在最前。

  flex-flow属性：flex-flow属性是flex-direction和flex-wrap的缩写。默认值为flex-flow: row none;`。

  justify-content属性：定义子元素在主轴的对齐方式。

- `flex-start`，默认值，起点对齐；
- `flex-end`，终点对齐；
- `center`，居中
- `space-between`，两端对齐，中间间隔分均分配；
 - `space-around`，所有间隔分均分配，即所有子元素拥有相同的左右(上下)间隔。

  align-items属性：定义子元素在副轴的对齐方式。

   - `flex-start`，副轴起点对齐；
   - `flex-end`，副轴终点对齐；
   - `center`，副轴居中对齐；
   - `baseline`，文本基线对齐
   - `stretch`，默认值，子元素如果没有设置高度(宽度)，占满整个容器。（如果全部子元素**都有**设置高度值，则表现和`flex-start`一致。）

  align-content属性：定义多主轴之间（也就是换行后行与行之间）的对齐方式。

 - `flex-start`，副轴起点对齐；
 - `flex-end`，副轴终点对齐；
 - `center`，副轴居中对齐；
 - `space-between`，副轴两端对齐，中间平均分配；
 - `space-around`，每行之间间距平均分配；
 - `strecth`，默认值，如果子元素没有设置高度，则占满对应主轴。（其余5个值中，没有设置高度的子元素和该行最高的高度一样）

  第三步：对子元素进行布局。

  order属性：定义子元素（视觉上）的展示顺序，值为一个数字，越小越优先摆放。

  flex-flow属性：用于规定 主轴有剩余空间时 子元素增大的分配比例，默认为0，即不增大。

  flex-shrink属性：用于规定 主轴空间不足时 子元素缩小的分配比例，默认为1，即分均分配来缩小。

  flex-basis属性：定义在分配空间之前，子元素占据的主轴空间大小。默认值auto即元素本来的大小。

  flex属性：flex-grow flex-shrink flex-basis的简写，默认值就是这三者的默认值flex: 0 1 auto;。最少需要写一个值，后两个值省略。flex有两个特殊值，auto相当于1 1 auto，none相当于0 0 auto。