[CSS] flex布局中的 flex-shrink 属性 (计算收缩值)

前置知识:
1、首先明确 flex-shrink属性是flex布局中，父元素A设置display: flex后，子元素B, C所设置的属性。

<A>
  <B></B>
  <C></C>
</A>

2、以默认设置(flex-direction:row)举例，仅在(父元素A的宽度) 小于 (B元素宽度+C元素宽度)时，flex-shrink配置生效。

补充知识:
flex-basis属性，在flex-direction: row 时控制元素的宽度，在flex-direction: column时控制元素的高度。
以flex-direction: row情况为例，同时设置了元素的 width 和元素的 flex-basis， flex-basis生效。
即flex-basis 的优先级高于 width ( flex-basis 的优先级也高于 height)

后文统一用flex-basis来行文。

元素收缩值的计算

元素收缩值 =
(元素的 flex-basis × flex-shrink)
÷
∑(所有元素的 flex-basis×flex-shrink)
×
需要收缩的总空间

元素的最终宽度 = 元素的初始宽度 - 元素收缩值

举例:
有如下flex布局

outer的宽度为400px; left的宽度为200px; right的宽度为500px;
all = ∑(所有元素的 flex-basis×flex-shrink) = 200 x 3 + 500 x 2 = 1600;

计算left的收缩值和最终宽度:

left元素的收缩值
= (left元素的 flex-basis × flex-shrink) ÷ all × 需要收缩的总空间
= (200 x 3) / 1600 x 300
= 112.5

left元素的最终宽度
= left元素的flex-basis - left元素的收缩值
= 200 - 112.5
= 87.5

计算right的收缩值和最终宽度:

right元素的收缩值
= (right元素的 flex-basis × flex-shrink) ÷ all × 需要收缩的总空间
= (500 x 2) / 1600 x 300
= 187.5

right元素的最终宽度
= right元素的flex-basis - right元素的收缩值
= 500 - 187.5
= 312.5

实际效果与计算值相符。

代码:
https://github.com/DiracKeeko/daily_test/blob/master/singleFileCase/0299CSS_flex-shrink计算.html

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/zng6p9vngzbv2yl5