CSS 参考手册 在线

561flex-shrink

flex-shrink 将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素,每个子元素原本宽度减去按比例分配的值,其剩余值为实际宽度。

以原有例子为模型,父元素命名为div0,1-5五个子元素分别命名为div1、div2、...、div5。

父元素需要设定:

display:flex,width:350px

所有子元素需要设定:

flex-basis:100px, 即不发生收缩时子元素原本的宽度

以上为先决条件。

子元素宽度之和与父元素宽度的差值:

100*5-350=150px

这时通过设定子元素的flex-shrink属性来决定150px总缩减量如何分配给5个子元素。

按照之前的预设,div2 的实际宽度为其它子元素的 1/3。

设子元素的宽度分别为w1、w2、...、w5,div2的flex-shrink值与其它子元素flex-shrink的值之比为X,有如下方程组:

w1=w3=w4=w5=100-150(1/X+4)
w2=100-150(X/X+4)
w1=w3=w4=w5=3w2

解方程组得

X=19/5,w2=26.92,w1=w3=w4=w5=80.77