弹性布局

1. 弹性容器：
   设置了display:flex,这个元素为弹性容器，里面的子元素会按照弹性布
   局进行布局 弹性子元素： 设置了display：flex,的弹性容器的子
   元素即 为弹性子元素

   1. 弹性主轴的方向：
      默认主轴从左到右：flex-direction:row、
      column从上到下、
      row-reverse从右到左、
      column-reverse从下到上

   2. 设置主轴内容分布：justify-content:
      flex-start：向主轴内容开始的位置靠拢（默认）
      center:向主轴的中心位置靠拢
      flex-end:向主轴内容结束的位置靠拢
      space-around：平均分布,两边有间距，两边间距是中间的一半
      space-between:平均分布，两边没有间距
      space-evenly:(新)平均分布，两边有间距，两边的间距和中间的一样

   3. 设置侧轴的内容分布 ：align-items:center;
      flex-start：向侧轴内容开始的位置靠拢
      center:向侧轴的中心位置靠拢
      flex-end:向侧轴内容结束的位置靠拢
      stretch:拉伸（默认值），如果设置高度此拉伸无效

   4. 弹性换行：
      默认不换行：flex-wrap: nowrap
      换行：flex-wrap: wrap

      设置侧轴的多行分布align-content
          flex-end：多行内容往侧轴的开端靠拢
          flex-start：多行内容往侧轴的结束端靠拢
          center：多行内容居中
          space-between:平均分布，两边没有间距
          space-arund:平均分布两边有间距，两边间距是中间的一半
          space-evenly：平均分布，所有间距一致
      

   5. **剩余空间分布设置
      flex:1;占据一份

   6. 子元素排序order
      设置在子元素上
      按照从小到大的顺序进行排序

   7. 单独设置子元素侧轴排布:align-self
      ceter:居中
      flex-start：靠近侧轴的开端
      flex-end：靠近侧轴的结束端
      stretch:拉伸**