flex有主轴交叉轴。
1.开启flex布局：display：flex/flex-inline
2.flex-direction：决定主轴方向（row，row-reverse，column，column-reverse），项目(item)根据flex-direction的方向顺序排放
3.justify-content：控制项目在主轴上的排放规则,值有如下
flex-start：项目从主轴开始main start 开始排放。
flex-end：项目从main end开始排列。
center：项目位于主轴中心
space-evently：主轴上的各项目之间的间隔完全相等。
space-around：主轴上的各项目之间的间隔完全相等，但是首个项目与main start以及最后一个项目与 main end 的间隔是项目之间间隔的一半。
space-between：首个项目位于main start，最后一个项目位于main end，主轴上的各项目之间的间隔完全相等
4.align-items：项目与交叉轴的对齐方式
flex-start/flex-end/center/stretch/baseline
baseline：项目中的首行文字对齐。
5.flex-wrap：换行方式
6.align-content：类似justify-content，项目在交叉轴方向上的排放规则。
7.flex-flow：flex-direction和flex-wrap简写
8：flex:1;相当于设置flex：1，1，0%,flex是flex-grow、flex-shrink、flex-basis的简写，如果仅给一个非负数字，表示单独设置flex-grow
flex：auto表示flex：1 1 auto
flex：none表示flex：0 0 auto
flex：非负数字 长度(百分比） 表示
flex-grow属性：决定项目放大的比例，默认为0，表示即使有剩余空间也不放大
flex-shrink属性：决定项目缩小的比例，默认为1。
flex-basis：决定项目的主轴空间(main-size)，默认为auto。如果同时width和flex-basis，flex-basis会覆盖width，flex-basis可以设置为固定宽度，或者设置百分比，设置百分比根据父元素来计算main size
