CSS属性多个子容器时使用flex-shrink 计算比例
目录
前提
在读这篇文章前,你必须对css的flex属性有些了解,并知道flex-shrink的计算方式。
- 你可以看阮一峰的flex布局教程,或者去w3cschool了解flex
- 关于flex-shrink的计算,我比较推荐这篇文章《深入理解 flex 布局以及计算_Flexbox, Layout》。PS:它感谢的那几篇文章也可以看看
问题起源
我在写布局的时候要用flex,页面是要做自适应的。因本人刚接触flex,所以这flex并没有按照我想要的效果来。页面在放大和缩小的时候总是不对劲,可能是因为我自作聪明,没有去了解flex-grow和flex-shrink的计算方式,以为那个比例是按照页面最后大小来占比的。后来我就去啃这两个东西,发现flex-grow的计算方式和我想的差不多,flex-shrink的计算却是不一样的,所以就去找将这flex-shrink的比例转换为页面最后大小的占比。
三个子容器使用flex-shrink计算比例
1、常规计算
假设f为父容器的宽,a为子容器A的flex-shrink,b为子容器B的flex-shrink,c为子容器C的flex-shrink,图为计算前容器摆放情况(忽略margin和padding)。最重要的条件是子容器的flex-basis = 100%。
由条件可知,超出部分是2f,权重和是 a f + b f + c f = ( a + b + c ) f af+bf+cf = (a+b+c)f af+bf+cf=(a+b+c)f
A将缩小 a f / ( a + b + c ) f ∗ 2 f af/(a+b+c)f*2f af/(a+b+c)f∗2f
A最后的结果是 f − a f / ( a + b + c ) f ∗ 2 f f-af/(a+b+c)f*2f f−af/(a+b+c)f∗2f
B将缩小 b f / ( a + b + c ) f ∗ 2 f bf/(a+b+c)f*2f bf/(a+b+c)f∗2f
B最后的结果是 f − b f / ( a + b + c ) f ∗ 2 f f-bf/(a+b+c)f*2f f−bf/(a+b+c)f∗2f
C将缩小 c f / ( a + b + c ) f ∗ 2 f cf/(a+b+c)f*2f cf/(a+b+c)f∗2f
C最后的结果是 f − c f / ( a + b + c ) f ∗ 2 f f-cf/(a+b+c)f*2f f−cf/(a+b+c)f∗2f
所以
A e : B e : C e = ( b + c − a ) : ( a + c − b ) : ( a + b − c ) Ae:Be:Ce=(b+c-a):(a+c-b):(a+b-c) Ae:Be:Ce=(b+c−a):(a+c−b):(a+b−c)
Ae、Be、Ce是子容器最终占页面的比例。
ps:这只适用三个子容器的情况,当容器增加,就会变成n元一次方程,计算会加大。
2、便捷计算
当条件和上述的一样时,根据比例的特性,可得
2 A e : 2 B e : 2 C e = ( b + c − a ) : ( a + c − b ) : ( a + b − c ) 2Ae:2Be:2Ce=(b+c-a):(a+c-b):(a+b-c) 2Ae:2Be:2Ce=(b+c−a):(a+c−b):(a+b−c)
即
{ 2 A e = b + c − a = a + b + c − 2 a 2 B e = a + c − b = a + b + c − 2 b 2 C e = a + b − c = a +