也許你並不知道 flex-shrink 的計算機制

Flexbox 佈局如今已經普遍使用了，我也常常使用。

不過到今天我才知道，原來本身一直以來都有這樣一個誤區：認爲 flex-shrink 的計算機制跟 flex-grow 同樣。但其實並非的。

咱們先來看看 flex-grow 的計算機制。

flex-grow

如下面的代碼爲例：

容器寬度 700px，每一個子元素寬度 100px，一共有 3 個子元素。所以，

剩餘空間 = 700 - 100 * 3 = 400

也就是說，剩餘空間有 400px。接下來就是如何分配這 400px 給 3 個子元素。

首先，計算各項目總的 grow 值：1 + 0 + 3 = 4。

而後按照各個項目的 grow 比例，分配剩餘空間：

• 分配給 .green:    1 / 4 * 400 = 100
• 分配給 .yellow:   0 / 4 * 400 = 0
• 分配給 .blue:      3 / 4 * 400 = 300

所以，最終各個項目的寬度以下：

• .green:    100 + 100 = 200
• .yellow:   100 + 0 = 100
• .blue:      100 + 300 = 400

咱們來看看是否是這樣的：

演示地址：codepen.io/zhangbao/pe…

果真。

好了，這算回顧一遍 flex-grow 的計算機制了。下面再來看看 flex-shrink 的。

flex-shrink

我再舉一個例子，看看 flex-shrink 的狀況。

咱們先不看最終的呈現效果。先按照 flex-grow 的計算思路計算下 flex-shrink。

錯誤的計算思路

容器寬度 800px，子元素寬度加起來 900px。就是說兩個子元素最終縮減寬度是 900 - 800，也就是 100px。

首先，計算各項目總的 shrink 值：4 + 6 = 10。

而後按照各個項目的 shrink 比例，分配縮減空間：

• 分配給 .green:    4 / 10 * 100 = 40
• 分配給 .yellow:   6 / 10 * 100 = 60

所以，最終各個項目的寬度以下：

• .green:    300 - 40 = 260
• .yellow:   600 - 60 = 540

好了，咱們如今看下實際狀況。

演示地址：codepen.io/zhangbao/pe…

傷心了，竟然一個是 275px，一個是 525 px。.green 縮減了 25px（而不是 40px），.yellow 縮減了 75px（而不是 60px）！

講了這些，就是爲了說明 flex-shrink 的計算機制跟 flex-grow 並不同。

接下來，咱們來看下正確的計算機制是如何的。

正確的計算思路

仍是上面的這個例子：

爲了計算出每一個 Flex 項目的最終寬度。咱們須要看幾個名詞：

• 項目收縮比例寬度（item shrink scaled width）
• 總的收縮比例寬度（total shrink scaled width）
• 收縮比例(shrink ratio)

項目收縮比例寬度

先看公式：

項目收縮比例寬度 = 項目寬度 * 項目的 flex-shrink 值

就是說：

• .green 的收縮比例寬度:    300 * 4 = 1200
• .yellow 的收縮比例寬度:   600 * 6 = 3600

總的收縮比例寬度

先看公式：

總的收縮比例寬度 = 各個項目收縮比例寬度之和

對應本例中的，也就是 1200 + 3600 = 4800。

收縮比例

先看公式：

收縮比例 = 項目收縮比例寬度 / 總的收縮比例寬度

就是說：

• .green 的收縮比例:    1200 / 4800 = 0.25
• .yellow 的收縮比例:   3600 / 4800 = 0.75

這裏的 0.25 和 0.25 纔是真正的項目收縮比例，而不是以前算出的 0.4（4 / 10） 和 0.6（6 / 10）。

最終的項目寬度

知道了 .green 和 .yellow 的收縮比例，還記得總的縮減寬度吧——100px。接下來，就能計算各項目分配的要縮減的寬度了：

• .green:    100 * 0.25 = 25
• .yellow:   100 * 0.75 = 75

也就是說：

• .green 的最終寬度:    300 - 25 = 275
• .yellow 的最終寬度:   600 - 75 = 525

下面再來看一下這張圖，是否是有茅廁頓開的感受？

參考連接

• github.com/samanthamin…

（完）