Flex
父容器
flex-direction
决定着主轴的方向，交叉轴是主轴逆时针旋转得到的
row | row-reverse | column | column-reverse
row: 默认值， 起点在左边，指向右边
row-reverse: 起点在右边指向左边
column: 起点在上边，指向下面
column-reverse: 起点在下面指向上面
flex-wrap
在轴线上换行方式
nowrap | wrap | wrap-reverse
nowrap: 默认值 不换行，显示不完会截取掉
wrap: 换行，第一行在上方
wrap-reverse: 换行， 第一行在下方
flex-flow
是指flext-direction 和flex-wrap的简称
flex-flow: row nowrap
justify-content
定义了子容器在主轴上如何排列的
flex-start | flex-end | center | space-between | space-around
flex-start: 往主轴的指向排列
flex-end: 往主轴指向的相反方向排列
flex-center: 从主轴的中间像两边排列
space-bwtween: 主轴两侧排列，子容器间留有相等距离
space-around: 子容器之间以及和父容器之间都留有一定距离。
align-items
交叉轴上子容器的排列方式
flex-start | flex-end | center | baseline | stretch
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content
多根轴线上的排列方式
flex-start | flex-end | center | space-between | space-around | stretch
子容器
order
排列顺序
1，2，3....
flex-grow
定义项目的放大比例，默认为零，就是指有剩余空间也不进行发大，若子容器flex-grow都设为1将等分剩余空间
flex-shrink
项目的缩小比例，默认为1，指的是空间不足时等比缩小，若设为0则不缩小
flex-basic
项目占据主轴的空间，默认值auto
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
