前言

昨天有了flex基本概念，接下來要針對flex-grow、flex-shrink、flex-basis這三個屬性進行詳細討論。

Flex Item 主要屬性:

以下屬性值不建議單獨定義，建議是在flex屬性中一同宣告。

flex-grow屬性

flex-grow 定義了在空間足夠下能否允許彈性項目擴展，同時也定義了同彈性容器中的彈性項目彼此之間擴展比例。

語法：
flex-grow 屬性會接受單一數字作爲值，只要大於 0，非整數也可以設定。
預設值為 0；
值為負數時屬性無效。

此屬性值設定了彈性擴展係數（flex growth factor），決定了彈性容器分配可用空間時其彈性項目的擴展比例。
如果所有的彈性項目都有相同的 flex-grow 值（例如：1），那麼剩餘空間就會平均分配給每個彈性項目。
「剩餘空間」指的是: (彈性容器的尺寸) - (其所有彈性項目原始大小的總和) = 「剩餘空間」

範例說明

取自Mdn
假設有一個寬度為 700px 的彈性容器，裡面有 4 個原始大小為 100px 寬的彈性項目，而它們的 flex-grow 值分別是：0、1、2、3。

• 方法一：
  剩餘空間：
  700px（彈性容器大小） - 400px（所有彈性項目總寬度） = 300px

總 flex-grow 值：0 + 1 + 2 + 3 = 6

每個「grow 單位」對應：300px ÷ 6 = 50px

各個彈性項目的寬：
第 1 個項目（grow: 0） ➜ 100px + 0 = 100px
第 2 個項目（grow: 1） ➜ 100px + (1 * 50px) = 150px
第 3 個項目（grow: 2） ➜ 100px + (2 * 50px) = 200px
第 4 個項目（grow: 3） ➜ 100px + (3 * 50px) = 250px

• 方法二：

或者也可以將 grow 單位轉換成係數：
總 flex-grow 值：6
係數為：每個彈性項目的 flex-grow 值 ÷ 6
剩餘空間：300px

各個彈性項目的寬：
第 1 個項目（grow: 0） ➜ 100px + 0 = 100px
第 2 個項目（grow: 1） ➜ 100px + (1 ÷ 6 * 300px) = 150px
第 3 個項目（grow: 2） ➜ 100px + (2 ÷ 6 * 300px) = 200px
第 4 個項目（grow: 3） ➜ 100px + (3 ÷ 6 * 300px) = 250px

注意：彈性項目的主軸尺寸受到可用空間、所有彈性項目的成長係數以及項目的彈性基準影響。

flex-shrink屬性

flex-shrink 屬性部分決定了彈性縮小係數（flex shrink factor），當在彈性容器內空間不足（negative free space）時，同彈性容器中的彈性項目彼此之間可以根據縮小比例以符合容器，來避免溢出。

整體來說，縮小係數是定義了沒有足夠空間內彈性項目且彈性容器不允許擴展或換行的情況下的「負值可用空間 (negative available space)」。

語法：
flex-shrink 屬性會接受單一數字作爲值，只要大於 0，非整數也可以設定。
預設值為 1；
值為負數時屬性無效。

當彈性容器內的彈性項目太大而無法全部放進去時（例如所有彈性項目加起來超過容器寬度），瀏覽器會試圖讓這些項目縮小。

與 flex-grow 差別

範例

取自<CSS大全第四版>
假設有一個寬度為 750px 的彈性容器，裡面有 3 個原始大小為 300px 寬的彈性項目，而它們的 flex-shrink 值分別是：1、1、3。

溢出：所有彈性項目的寬總合 - 彈性容器大小 = 要騰出的空間
(3 * 300px) - 750px = 150px

總 flex-shrink 值：1 + 1 + 3 = 5

每個「shrink 單位」對應：150px ÷ 5 = 30px

各個彈性項目的寬縮小後：
第 1 個項目（shrink: 1） ➜ 300px - (1 * 30px) = 270px
第 2 個項目（shrink: 1） ➜ 300px - (1 * 30px) = 270px
第 3 個項目（shrink: 3） ➜ 300px - (3 * 30px) = 210px

也同樣能將shrink 單位轉換成係數做換算，
每個彈性項目的 flex-shrink 值 ÷ 5 = 係數
1 ÷ 5 = 0.2
3 ÷ 5 = 0.6
各個彈性項目的寬縮小後：
第 1 個項目（shrink: 1） ➜ 300px - (0.2 * 150px) = 270px
第 2 個項目（shrink: 1） ➜ 300px - (0.2 * 150px) = 270px
第 3 個項目（shrink: 3） ➜ 300px - (0.6 * 150px) = 210px

若是縮小後內容溢出

上述寬能夠縮小，前提是彈性項目的內容不會超過縮小後的寬
若內容無法換行或是在主軸方向縮小，彈性項目就不會進一步縮小。

如上題，假設第一個彈性項目裡有一張 300px 的圖片內容，
在 flex-shrink 設定裡第一個項目縮小後寬變為 270px （小於圖片內容寬度），變成彈性項目不會縮小。
即flex-shrink: 0

• 計算如下：
  每個「shrink 單位」對應：150px ÷ 4 = 37.5px
  各個彈性項目的寬縮小後：
  150px
  第 1 個項目（shrink: 1） ➜ 300px - (0 * 37.5px) = 300px
  第 2 個項目（shrink: 1） ➜ 300px - (1 * 37.5px) = 262.5px
  第 3 個項目（shrink: 3） ➜ 300px - (3 * 37.5px) = 187.5px

flex-basis 屬性

flex-basis 屬性部分定義了彈性項目在分配額外或負值空間（空間不足）前的初始值或預設值，也就是在彈性項目依據設定擴展或縮小係數變化之前的尺寸，可以說是設定彈性項目的主軸初始尺寸（Initial Main Size），也就是一個項目在 Flex 容器中「一開始要佔多少空間」。
這個組成部分也可以用 flex-basis 屬性設定。

flex-basis 屬性值

語法：
flex-basic 屬性值預設為 auto。
其他屬性值: <length>、<precentage %>、content
例如：200px、50%、content、min-content 。

與 flex-grow、flex-shrink的關係

同時設定了 flex-grow: 1 和 flex-shrink: 1（常見寫法是 flex: 1 1 200px;），Flex 項目會依照 flex-basis 設定的初始尺寸「起始大小」，然後根據容器的可用空間進行 擴展（grow） 或 縮小（shrink）。

參考資料

CSS Flexible Box Layout Module Level 1 - 7.2.1~7.2.3

Mdn : flex-grow
Mdn : flex-shrink
Mdn : flex-basic

W3school CSS flex-grow Property