CSS属性多个子容器时使用flex-shrink 计算比例

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，权重和是$af+bf+cf=(a+b+c)f$
A将缩小 $af/(a+b+c)f\ast 2f$
A最后的结果是 $f-af/(a+b+c)f\ast 2f$
B将缩小 $bf/(a+b+c)f\ast 2f$
B最后的结果是 $f-bf/(a+b+c)f\ast 2f$
C将缩小 $cf/(a+b+c)f\ast 2f$
C最后的结果是 $f-cf/(a+b+c)f\ast 2f$
所以
$$Ae:Be:Ce=(b+c-a):(a+c-b):(a+b-c)$$
Ae、Be、Ce是子容器最终占页面的比例。

ps:这只适用三个子容器的情况，当容器增加，就会变成n元一次方程，计算会加大。

2、便捷计算

当条件和上述的一样时，根据比例的特性，可得
$$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 +