flex弹性布局（主流）

一.传统布局与flex布局区别（不需要清除浮动，一行内显示）

二.布局原理（父级添加，控制子盒子）

三.flex布局父级常用属性

1.flex-direction(默认x轴row）

概念


属性

2.flex-wrap(默认不换行）

3.justify-content（主轴子元素排列方式）

4.align-items（侧轴子元素排列方式）

5.align-content（侧轴子元素排列方式）（多行）

6.align-items和align-content的区别

7.flex-flow

四.flex布局子项常见属性

1.flex

2.align-self

3.order

4.flex-grow，flex-shrink

一.flex-glow【默认值1，初始值0】
flex-grow指定了弹性增长因子（flex grow factor），这决定了在分配正可用空间时，弹性元素相对于弹性容器中的其余弹性元素的增长程度。

所以flex-grow在存在正可用空间时，分配空间按照其值的grow比例进行分配。如果 所有弹性元素的flex-grow 的值全部相同，并且在弹性容器中还有正可用空间，那么它就会被平均地分配给所有元素
二、flex-shrink【默认值、初始值均为1】
flex-shrink属性指定了弹性收缩因子（flex shrink factor），它确定在分配负可用空间时，弹性元素相对于弹性容器中其余弹性元素收缩的程度。只要 flex-shrink 有正值，元素就会收缩以至于它们不会溢出容器。因此 flex-grow 用于添加可用空间，而 flex-shrink 减少空间来使盒子适应它们的容器而不溢出

其值的大小，和flex-grow类似，**0为不可收缩，**1或者其他比例则按比例收缩在负空间中