flex

1、flex:1

● flex-grow: 1 增大盒子 比如：当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比

● flex-shrink: 1 缩小盒子 用来设置子盒子超过父盒子的宽度后，超出部分进行缩小的取值比例

● flex-basis: 0% 覆盖width 用来设置盒子的基准宽度，并且basis和width同时存在，basis会把width干掉

2、flex 缩写

● flex:1 => flex:1 1 0;

● flex:none => flex: 0 0 auto

● flex:1 =>flex: 1 1 0%

● flex: auto => flex: 1 1 auto

3、细化

3.1、缩写

flex是flex-grow, flex-shrink 和 flex-basis的缩写，flex属性值可只指定一个属性的值，另外的属性值采用各自在flex属性中的初始值，但flex-grow和flex-basis的初始值和原始的默认值不同。

3.2、初始值

flex-grow 用于设置各item项按对应比例划分剩余空间，若flex中没有指定flex-grow,则相当于设置了flex-grow:1

flex-shrink 用于设置item的总和超出容器空间时，各item的收缩比例，若flex中没有指定flex-shrink,等同设置flex-shrink:1

flex-basis 用于设置各item项的伸缩基准值，可以取值为长度或百分比，如果flex中省略了该属性，则相当于设置了flex-basis:0