Flex弹性布局

一：flex布局适用于块级元素也适合于行内元素

块级元素display:flex,行内元素:display:inline-flex

二：flex轴线-----默认两条

1.水平主轴

2.垂直交叉轴

三：容器属性

1.项目的排列方向（决定主轴是水平轴线还是垂直轴线,row-水平，column-垂直）

flex-direction: row (默认，从左到右)|

row-reverse（从右到左） 

column （从上到下） 

column-reverse （从下到上）

2.一行排列不下时的情况

flex-wrap: nowrap(默认，不换行，压缩盒子宽度)

 wrap(从上往下换行) 

wrap-reverse(从下往上换行)

3.flex-flow:flex-direction || flex-wrap 缩写形式

4.项目在主轴上的对齐方式

justify-content: flex-start(沿着当前主轴方向，默认水平主轴从左到右)

flex-end(沿着当前主轴的反方向) 

center:主轴中点

space-between(两端对齐)

space-evenly（均匀分割空隙）

space-around（项目左右两边间隙一样大）

5.项目在次轴上对齐方式

align-items: flex-start：沿着当前次轴方向，默认垂直次轴从上到下

flex-end：沿着当前次轴的反方向
center：次轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch：默认值，如果项目未设置高度或者auto，项目将占满整个容器的高度

6.多跟轴线（超过一行或者一列）的对齐方式，如果项目只有一根轴线，该属性不起作用

align-content：同align-items属性一致

四：项目属性

1.order属性 定义了项目的排列顺序，数值越小，排列于考前，默认为0

2.flex-grow属性 定义了项目的放大比例，默认为0,不放大，如果项目所有的flex-grow属性都为1，它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为n，另一个项目为1，为n的项目占据的剩余空间的n/(n+1)

3. flex-shrink属性 定义了项目的缩小比列，默认为1，不缩小。如果空间不足，该项目将缩小

4.flex-basis属性 定义了在分配多余空间之前，项目占据的主轴空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如200px），项目将占据固定空间

5. flex属性 是flex-grow属性flex-shrink属性和flex-basis属性的简写，默认值为 0 1 auto ，后两个属性可选

6.align-self属性 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch 。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性