flex布局：

display:flex;(-webkit)

兩軸：

  1.主軸（main axis)：子元素垂直方向上的中點垂直線；
  2.縱軸（cross axis)：子元素水平方向上的中點垂直線；

屬性：

- 父元素中：1.flex-direction:子元素在主軸上的排列順序
          （可選值:row/row-reverse/column/column-reverse）
          2.flex-wrap:是否換行(可選值：nowrap/wrap/wrap-reverse)
          3.flex-flow:1和2的縮寫形式
          4.justify-content:子元素在主軸上的對齊方式
         （可選值:flex-start/flex-end/center/space-between/space-around）
          5.align-items:子元素在交叉線上的對齊方式.
          (可選值:flex-start/flex-end/space-between/space-around/center)
          6.align-content:當子元素中有多于一根軸線時有效，用于設置子元素的對齊方式.
          (可選值:flex-start/flex-end/center/space-between/space-around/stretch)
-子元素中: 1.align-self:單個元素自身的對齊方式；
          （auto | flex-start | flex-end | center | baseline | stretch）
          2.order:排列順序，默認0；
          3.flex-grow:放大比例，默認0；
          4.flex-shrink:縮小比例，默認0；
          5.flex-basis:占主軸的比例，默認auto
          6.flex:order|flex-grow|flex-shrink|flex-basis(2-5的縮寫）