Flex布局笔记

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的缩写）