CSS中flex-basis、flex-grow、flex-shrink对比

1.flex-basis:设置或检索弹性盒伸缩基准值。

例子：

当子元素无设置width和flex-basis时，根据内容实际宽度显示；

当子元素设置width和flex-basis：auto；时，根据width值显示；.div3的实际宽度为300px

当子元素设置width和flex-basis值时，根据flex-basis值显示；.div4的实际宽度为200px

 

 2.flex-grow:设置或检索弹性盒子的扩展比率(瓜分剩余空间)

 

 例子：

.div2没有设置flex-grow,默认值为0；

div3和div4设置flex-grow为2和1；

剩余空间被分为2+1 = 3份；剩余空间= 600-40-300-200 = 60px;

div2的真实宽度为40px;

div3的真实宽度为300+(60/3*2) = 340px;

div4的真实宽度为200+(60/3) = 220px;

 

3.flex-shrink:指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值

 div2+div3+div4的宽度 = 100+ 300+200 = 600 , 大于父元素div1的宽度400;

.div2没有设置flex-shrink,默认值为1；

div3和div4设置flex-shrink为2和1；

div2的需减少的宽度为100 / (100*1 + 300*2 + 200*1)  * 100 = 11px;div2的真实宽度为100 - 11 = 89px;

div3的需减少的宽度为300 / (100*1 + 300*2 + 200*1)  * 100 = 33px;div3的真实宽度为300 - 11 = 267px;

div4的需减少的宽度为200 / (100*1 + 300*2 + 200*1)  * 100 = 22px;div4的真实宽度为200 - 11 = 178px;