文章主要介紹了詳解flex佈局的元素如何分配容器的剩餘空間，文中透過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
自從開始開學習 CSS 佈局，想要比較靈活的把父元素的空間分配給各個子元一直是各個前端程式設計師的夢想。
在 flex 之前，如果不是專門去搜尋相關的解決方案，一般人幾乎想不出非常靈活的三（多）欄等高佈局方案，而即使看了解決方案，很多人也會大呼奇技淫巧。
不得不感慨在 flex 之前 CSS 的佈局功能之弱：基本只能使用一些並非為佈局而設計的屬性來實現想要的佈局——float、inline-block、position、甚至是 table 等。而使用這些屬性來實現各種佈局效果，往往又會遇到相當多另外的坑：比如浮動的閉合、inline-block 的垂直對齊、position 的定位原點以及 table 的不夠靈活等。
直到出現了 flex
flex 可以說是一次性解決了前端佈局的所有的問題（當然，並沒有完全解決，要不然也不會有 grid layout 了），以前很難實現的佈局效果在 flex 下簡直不能更簡單，以至於一些其它平臺也開始吸納 flex 的佈局思想，也有些開源專案把 flex 的佈局方式移植到其它平臺。
中文社群也有不少寫 flex 的文章，比如 ruanyifeng。然而個人覺得不少寫 flex 的文章都有個通病，就是一上來就整一堆 flex 相關的術語，比如 flex container，flex item，main axis（主軸），cors axis（交叉軸），不禁讓人望而生畏，都還沒搞清楚怎麼回事，就來一堆術語。
然而這還不是最大的問題，最大的問題是很多文章並沒有把 flex 佈局的詳細計算方式講清楚，尤其是連 ruanyifeng 的文章也沒把這事說清楚，但是在 Google 搜尋 flex 相關的文章，他的文章卻會出現在第一頁。因為我覺得他寫的並不好，所以就不貼地址了，想看的同學可以自己搜一下，就在第一頁。
即使是 MDN 以及《The Book Of CSS3》裡也沒把 flex-grow 和 flex-shrink 的計算方式說清楚。
所以我決定寫這一篇文章，把 flex-grow 與 flex-shrink 的詳細計算方式講清楚。
flex 如何解決傳統常見佈局問題
在傳統佈局中最常見也是急需的當然就是在從左往右把父元素的空間分配給子元素以實現多欄佈局了：按比例也好，定寬也好，更靈活的定寬加佔用剩餘空間也好。
那我們就從使用 flex 如何實現三欄佈局開始吧。
想要實現三欄等高佈局，且兩邊的側欄寬度固定而中間一欄佔用剩餘的空間，如下程式碼就足夠了：
<style>
section {display: flex;}
.left-side,
.right-side {width: 200px;}
.content {flex-grow: 1;}
</style>
<section>
<div class="left-side"></div>
<div class="content"></div>
<div class="right-side"></div>
</section>
其中 section 元素的寬度將會像 block 元素一樣儘量的寬，對外面的元素來說，它的行為很像一個 block 塊。三個元素會從左往右佔據父元素的空間（這很顯然）。左右側邊欄的寬度都是 200px，中間 .content 元素的寬度將會佔據 section 元素的剩餘寬度。
另外，section 的高度會自動被最高的一個子元素撐開，同時其它子元素的高度也會被拉到跟 section 元素一樣高，而如果給 section 元素設定了高度，而所有子元素的高度設定為 auto ，所有的子元素也都會自動跟父元素一樣高，這簡直就是在傳統佈局中做夢都想要的功能！
總之，在高度方面，flex 的表現是相當符合直覺的。
另外，如果不給 flex 子元素設定寬度和 flex-grow，它會盡量的窄。
flex-grow 的計算方式
上面 demo 中最值得注意的是 .content 元素的 flex-grow 屬性，設定為 1 它就可以佔滿水平剩餘空間。這也是本文的重點：講清 flex-grow 與 flex-shrink 屬性的詳細計算方式。
flex-grow 屬性決定了父元素在空間分配方向上還有剩餘空間時，如何分配這些剩餘空間。其值為一個權重（也稱擴張因子），預設為 0（純數值，無單位），剩餘空間將會按照這個權重來分配。
比如剩餘空間為 x，三個元素的 flex-grow 分別為 a，b，c。設 sum 為 a + b + c。那麼三個元素將得到剩餘空間分別是 x a / sum, x b / sum, x * c / sum，是為權重也。
舉個例子：
父元素寬度 500px，三個子元素的 width 分別為 100px，150px，100px。
於是剩餘空間為 150px
三個元素的 flex-grow 分別是 1，2，3，於是 sum 為 6
則三個元素所得到的多餘空間分別是：
150 * 1 / 6 = 25px
150 * 2 / 6 = 50px
150 * 3 / 6 = 75px
三個元素最終的寬度分別為 125px，200px，175px。
100px + 25px = 125px
150px + 50px = 200px
100px + 75px = 175px
可以開啟這個 demo（下文中所有的 demo 都在這個頁面） 然後用開發工具檢視一下。注意不要用截圖工具量，可能量不準，因為高分屏和放大等諸多因素都會影響測量結果。
然而！不止這些，還有一種情況：
當所有元素的 flex-grow 之和小於 1 的時候（注意是 1，也就是說每個元素的 flex-grow 都是一個小數如 0.2 這樣的），上面式子中的 sum 將會使用 1 來參與計算，而不論它們的和是多少。也就是說，當所有的元素的 flex-grow 之和小於 1 的時候，剩餘空間不會全部分配給各個元素。
實際上用來分配的空間是 sum(flex-grow) / 1 * 剩餘空間，這些用來分配的空間依然是按 flex-grow 的比例來分配。
還是上面一個例子，但是三個元素的 flex-grow 分別是 0.1，0.2，0.3，那麼計算公式將變成下面這樣：
150 * 0.1 / 1 = 15px
150 * 0.2 / 1 = 30px
150 * 0.3 / 1 = 45px
150px - 15px - 30px - 45px = 60px，即還有 60px 沒有分配給任何子元素。
三個元素的最終寬度分別為：
100px + 15px = 115px
150px + 30px = 180px
100px + 45px = 145px
如上所述即是 flex-grow 的計算方式。
另外，flex-grow 還會受到 max-width 的影響。如果最終 grow 後的結果大於 max-width 指定的值，max-width 的值將會優先使用。同樣會導致父元素有部分剩餘空間沒有分配。
flex-shrink 的計算方式
前文已經說到，flex 幾乎一次性解決了前端佈局的所有問題。
那麼既然可以在空間有多餘時把多餘空間分配給各個子元素，當然也可以在空間不夠時讓各個子元素收縮以適應有限的空間了。
這就是 flex-shrink 屬性的作用。
你可能會覺得 flex-shrink 的計算方式跟 flex-grow 很類似，然而事情並沒有這麼簡單。
flex-shrink 屬性定義空間不夠時各個元素如何收縮。其值預設為 1。很多文章對此基本是一筆帶過：“flex-shrink 屬性定義了元素的收縮係數”，根本就不說它具體是怎麼計算的。
flex-shrink 定義的僅僅只是元素寬度變小的一個權重分量。
每個元素具體收縮多少，還有另一個重要因素，即它本身的寬度。
舉個例子：
父元素 500px。三個子元素分別設定為 150px，200px，300px。
三個子元素的 flex-shrink 的值分別為 1，2，3。
首先，計運算元元素溢位多少：150 + 200 + 300 - 500 = -150px。
那這 -150px 將由三個元素的分別收縮一定的量來彌補。
具體的計算方式為：每個元素收縮的權重為其 flex-shrink 乘以其寬度。
所以總權重為 1 150 + 2 200 + 3 * 300 = 1450
三個元素分別收縮：
150 1(flex-shrink) 150(width) / 1450 = -15.5
150 2(flex-shrink) 200(width) / 1450 = -41.4
150 3(flex-shrink) 300(width) / 1450 = -93.1
三個元素的最終寬度分別為：
150 - 15.5 = 134.5
200 - 41.4 = 158.6
300 - 93.1 = 206.9
同樣，當所有元素的 flex-shrink 之和小於 1 時，計算方式也會有所不同：
此時，並不會收縮所有的空間，而只會收縮 flex-shrink 之和相對於 1 的比例的空間。
還是上面的例子，但是 flex-shrink 分別改為 0.1，0.2，0.3。
於是總權重為 145（正好縮小 10 倍，略去計算公式）。
三個元素收縮總和並不是 150px，而是隻會收縮 150px 的 (0.1 + 0.2 + 0.3) / 1 即 60% 的空間：90px。
每個元素收縮的空間為：
90 0.1(flex-shrink) 150(width) / 145 = 9.31
90 0.2(flex-shrink) 200(width) / 145 = 24.83
90 0.3(flex-shrink) 300(width) / 145 = 55.86
三個元素的最終寬度分別為：
150 - 9.31 = 140.69
200 - 24.83 = 175.17
300 - 55.86 = 244.14
當然，類似 flex-grow，flex-shrink 也會受到 min-width 的影響。
總結
雖然上面的公式看起來很複雜，其實計算過程還是比較簡單的：如果所有元素的 flex-grow/shrink 之和大於等於 1，則所有子元素的尺寸一定會被調整到適應父元素的尺寸（在不考慮 max/min-width/height 的前提下），而如果 flex-grow/shrink 之和小於 1，則只會 grow 或 shrink 所有元素 flex-grow/shrink 之和相對於 1 的比例。grow 時的每個元素的權重即為元素的 flex-grow 的值；shrink 時每個元素的權重則為元素 flex-shrink 乘以 width 後的值。