flex布局

水平的主轴row，垂直的交叉轴column

• 主轴方向：flex-direction: row | row-reverse | column | column-reverse
• 主轴对齐方式：justify-content: flex-start | center | flex-end | space-between(间隔排列) | spae-around(项目两侧的间隔相等)
• 当属性定义多根轴线的对其方式，如果只有一根轴线，该属性不起作用：align-content: flex-start | flex-end | center | space-around | space-between
• 垂直轴对齐方式：align-items: flex-start | center | flex-end | stretch(默认值 项目未设置高度或者auto则占满整个容器的高度) | baseline(项目的第一行文字基线对齐)
• 允许单个项目与其他项目有不一样的对齐方式,可覆盖align-items：aligin-self: flex-start | center | flex-end | stretch(默认值 项目未设置高度或者auto则占满整个容器的高度) | baseline(项目的第一行文字基线对齐)
• 换行方式：flex-wrap: nowrap | wrap | wrap-reverse
• flex-flow: flex-direction flex-wrap
• 当属性定义了在非配多余空间之前会根据这个属性，计算主轴是否有多余空间 flex-basis：
• flex-grow:
• flex-shrink:

当元素设置为flex布局之后，子元素的float，clear，vertical-align将会失效

• 容器上属性：
  display: flex;
  flex-direction: row | row-reserve | column | column-reserve
  flex-wrap: nowrap | wrap | wrap-reserve
  flex-flow: flex-direction , flex-wrap
  justify-content: flex-start | flex-end | center | space-between | space-around
  align-items: flex-start | flex-end | center | baseline | stretch
  align-content: flex-start | flex-end | center | stretch | space-between | space-around

• 项目上属性：
  order: <number> 排列顺序，数值越小排列越前，默认值0
  flex-grow: <number> 当为1时，平分剩余空间，等列排布， 默认值0
  flex-shrink: <number> 当有为0时，空间不够不会缩小，其余缩小，默认值1
  flex-basis: width的属性写法，项目的大小，当空间不足时会缩小，按照flex-shrink的缩小规则
  flex: flex-grow , flex-shrink , flex-basis
  align-self: flex-start | flex-end | center | stretch | baseline