flex记录

 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