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
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
561flex-shrink
flex-shrink 将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素,每个子元素原本宽度减去按比例分配的值,其剩余值为实际宽度。
以原有例子为模型,父元素命名为div0,1-5五个子元素分别命名为div1、div2、...、div5。
父元素需要设定:
所有子元素需要设定:
flex-basis:100px, 即不发生收缩时子元素原本的宽度
以上为先决条件。
子元素宽度之和与父元素宽度的差值:
这时通过设定子元素的flex-shrink属性来决定150px总缩减量如何分配给5个子元素。
按照之前的预设,div2 的实际宽度为其它子元素的 1/3。
设子元素的宽度分别为w1、w2、...、w5,div2的flex-shrink值与其它子元素flex-shrink的值之比为X,有如下方程组:
解方程组得