flex弹性布局

       /* 弹性布局 */
       display: flex;
       /* 主轴的方向 */
       flex-direction: row | row-reverse | column | column-reverse | initial | inherit;
                     左到右 | 右到左       | 上到下  |  下到上         |  最初    | 继承 
       /* 控制换行 */
       flex-wrap: nowrap | wrap | wrap-reverse;
                 不允许换行| 允许  | 换行反转
      /* 控制主轴方向与换行 */
      flex-flow:  <flex-direction> || <flex-wrap>;
      /* 主轴对齐方向 */
      justify-content: flex-start | flex-end | center | space-between | space-around;
                       左到右       | 右到左  | 居中  | 两边不留间隙    | 两边留间隙
      /* 副轴对齐方式 */
      align-items:  flex-start | flex-end | center | stretch | baseline;
                    上到下     | 下到上  |  居中  | 拉伸百分百   | 文字基线对齐
      /* 主轴对齐方式 */
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
                        上对齐   | 下对齐    | 居中     |上下不留间隙   | 上下留间隙   | 上下拉伸 
      order（默认情况下flex order会按照书写顺训呈现，可以通过order属性改变，数值小的在前面，还可以是负数）
      flex-grow（设置或检索弹性盒的扩展比率,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间）
      flex-shrink（设置或检索弹性盒的收缩比率,根据弹性盒子元素所设置的收缩因子作为比率来收缩空间）
      flex-basis (设置或检索弹性盒伸缩基准值，如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间)
      flex   (flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选)        
      /* 子元素设置单独的对齐方式 */
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
                  自动  | 从上到下   | 从下到上  | 居中  | 基线对齐   | 拉伸