【教將來男友學前端】flex收縮算法（一）

基礎的flexbox佈局方法，你們都比較熟悉了，平常畫頁面 flexbox 佈局用的66的，靈活佈局、不一樣移動設備的適配我也不在話下，但是同事問我：「知道flex的具體是怎麼計算的嗎」，我一臉懵，我也不清楚呢，既然不懂就要學🤦‍♀️，寫給將來男友呀。

疑問：

1、如何收縮尺寸來避免父元素溢出？

2、怎樣增長尺寸來填滿未使用的空間？

今天就寫篇 flex 的收縮算法給同事，也給將來男友呀。若是你想看flex基礎的，能夠移步到 flex MDN，要是來看 flex收縮算法 你就來對地方了，裏面有一些數學計算，不過都很簡單。爲了計算出有多少可用空間能佈局於flex子元素，瀏覽器必須知道這個item有多大才能開始。接下來咱們來看看不一樣狀況下的item是怎麼計算的。

1、如何收縮尺寸來避免父元素溢出？

咱們舉個🌰（項目的壓縮因子相加小於1時）：

一個寬度爲500px的容器，裏面的是三個項目分別是150px、200px、250px，分別對項目1和項目2設置 flex-shrink 爲 2，3，項目3不設置，默認 flex-shrink 爲 1。

第一步：計算項目溢出值

500 - (150 + 200 + 250) = -100px

第二步：計算各個項目的寬度乘以 flex-shrink 的總權重

150 * 2 + 200 * 3+ 250 * 1 = 1150

第三步：計算各個項目壓縮空間的大小

總溢出空間 * 項目寬度 * flex-shrink / 總權重，計算的時候值若是爲小數，則向下取整。

item1的最終寬度爲：150 - 100 * 150 * 2 / 1150 ≈ 123 item2的最終寬度爲：200 - 100 * 200 * 3 / 1150 ≈ 147 item3的最終寬度爲：250 - 100 * 250 * 1 / 1150 ≈ 228

最終效果

第二個🌰（項目的壓縮因子相加小於1時）：

一個寬度爲500px的容器，裏面的是三個項目分別是150px、200px、250px，分別對項目一、項目2和項目3設置 flex-shrink 爲 0.1，0.2，0.3。

第一步：計算項目溢出值

500 - (150 + 200 + 250) = -100px

溢出空間 = 溢出值 * ( 收縮因子之和 / 1 )：

溢出空間: 100 * (0.1 + 0.2 + 0.3) / 1 = 60

第二步：計算各個項目的寬度乘以 flex-shrink 的總權重

總權重爲 150 * 0.1 + 200 * 0.2 + 250 * 0.3 = 130

第三步：計算各個項目壓縮空間的大小

項目的實際大小 = 項目的指定寬度 - 溢出空間 * 項目寬度 * 收縮因子 / 總權重

item1的最終寬度爲：150 - 60 * 150 * 0.1 / 130 ≈ 143px item2的最終寬度爲：200 - 60 * 200 * 0.2 / 130 ≈ 181px item3的最終寬度爲：250 - 60 * 250 * 0.3 / 130 ≈ 215px

最終效果

當項目在主軸方向上溢出時，經過設置項目收縮因子來壓縮項目適應容器就告一段落了。先喝點茶，稍做休息，繼續看看當項目在主軸方向上撐不滿容器的時候，是怎麼擴張來填滿容器的。

2、怎樣增長尺寸來填滿未使用的空間 ？

舉個🌰（當項目的擴張因子相加大於1時）：

一個寬度爲500px的容器，裏面的是三個項目分別是120px、150px、200px，分別對項目1和項目2設置 flex-grow 爲 2，1，項目3不設置，默認 flex-grow 爲 0。

第一步：計算容器的剩餘空間

500 - (120 + 150 + 200) = 30px

第二步：分配剩餘的空間

30px / ( 2+ 1 + 0) = 10px

第三步：計算各個項目擴張空間的大小

項目寬度 + (每份擴張配額 / 當前項目的擴張因子)

item1的最終寬度爲：120 + 10 * 2 = 140 item2的最終寬度爲：150 + 10 * 1 = 160 item3的最終寬度爲：200 + 10 *0 = 200

最終效果

最後一個🌰（當項目的擴張因子相加小於1時）：

一個寬度爲500px的容器，裏面的是三個項目分別是120px、150px、200px，分別對項目一、項目二、項目3設置 flex-grow 爲 0.3，0.2，0.1。

第一步：計算容器的剩餘空間

500 - (120 + 150 + 200) = 30px

第二步：分配剩餘的空間

Flex-grow 相加 0.1 + 0.2 + 0.3 = 0.6 < 1

剩餘空間按每 0.1 擴張因子是5px。

第三步：計算各個項目擴張空間的大小

項目寬度 + (每份擴張配額 / 當前項目的擴張因子)

每份擴張配額 = 30 / 0.6 = 50px

item1的最終寬度爲：120 + 30 / 0.6 * 0.1 = 125 item2的最終寬度爲：150 + 30 / 0.6 * 0.2 = 160 item3的最終寬度爲：200 + 30 / 0.6 * 0.3 = 215

最終效果

小結

媽耶，終於計算完了。咳咳！總算弄清了flex的收縮算法，寫給將來男友看的flex完結✌ 。️若是這篇文檔也有幫助到你，記得點贊、評論、關注三連擊呀 😝