flex含义

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、flex细化

3.1、flex是缩写

flex是flex-grow, flex-shrink 和 flex-basis的缩写，flex属性值可以只指定一个属性的值，而另外的属性值采用各自在flex属性中的的初始值，但是有一点要注意的是：flex属性中flex-grow和flex-basis的初始值和它们原始的默认值不同，至于为什么不同，mdn中有明确的说过这样的设计是为了让「flex」缩写在最常见的情景下比较好用。

3.2、flex中对应各属性的初始值

• 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

3.2、flex的不同取值

• 当flex为none时,等同于flex: 0 0 auto;
• 当flex为auto时，等同于flex: 1 1 auto;
• flex值为一个非负数字：当flex取值为一个数字，则该数字是设置的flex-grow值，其它两个属性用初始值，如 flex:1 时，等同于flex : 1 1 0%
• flex值为两个非负数字：当flex取值为2个数字时，相当于设置的flex-grow和flex-shrink值，flex-basis取值为初始值，如flex:1 0 时，等同于flex: 1 0 0%
• 当 flex 取值为1个数字和1个长度或百分比时，设置的是 flex-grow 和 flex-basis 的值，flex-shrink 值是初始值，如 flex: 1 20%,等同于 flex : 1 1 20%