文章將陸續整理並更新至個人部落格。

上一篇文章 中說明了 flex 屬性是 flex-grow、flex-shrink、flex-basis 三個屬性的三合一，而 flex 屬性值除了直接給定三種值之外，還有幾種寫法。

flex 屬性

flex: flex-grow ｜ flex-shrink ｜ flex-basis

flex 屬性除了直接給定 flex-grow、flex-shrink、flex-basis 三個值之外，還有以下幾種寫法。

• flex: initial
• flex: auto
• flex: none
• flex: <正數>

註：<正數> 可不必為整數，例如可為 0.5。

以下分別說明這四種屬性值的意義。

flex: initial

等同於 flex： 0 1 auto

flex item 會依照 width 或 height (視主軸 main axis 而定)屬性決定其尺寸，即使 container 中有剩餘空間，flex item 仍無法延伸，但當空間不足時，元素可收縮。

flex: auto

等同於 flex: 1 1 auto

flex item 可延伸與收縮，會依照 width 或 height (視主軸 main axis 而定)屬性決定其尺寸。若所有 flex items 均設定 flex: auto 或 flex: none，則在 flex items 尺寸決定後，剩餘空間會被平分給 flex: auto 的 flex items。

flex: none

等同於 flex: 0 0 auto

flex item 不可延伸與收縮，會依照 width 或 height (視主軸 main axis 而定)屬性決定其尺寸。

flex: <positive-number>

等同於 flex: <正數> 1 0

flex item 可延伸與收縮，flex-basis 為 0，故 flex item 會依據所設定的比例佔用 container 中的剩餘空間。

例如

flex: 2;

等同於

flex: 2 1 0;

可利用此種屬性值的指定方式，輕易地決定 flex items 在 flex container 中所佔的尺寸比例 (width 或 height，視主軸 main axis 而定)。

例如，一個 flex container 裡面有三個 flex items，希望不管 container 如何變化，這三個 items 的尺寸皆一樣大，則可設定每個 items 的 flex 屬性有相同的正數(positive-number)。

<div class="container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>

.container {
  display: flex;
  height: 120px;
}

.item1 {
  flex: 1;   /* 將得到容器中剩餘空間的 1/(1+1+1)＝1/3 等份 */
}

.item2 {
  flex: 1;   /* 將得到容器中剩餘空間的 1/(1+1+1)＝1/3 等份 */
}

.item3 {
  flex: 1;   /* 將得到容器中剩餘空間的 1/(1+1+1)＝1/3 等份 */
}

註：只要是相同正數即可，其僅代表比例關係。

且不論容器如何變動(例如縮放視窗時)，比例皆為 1 : 1 : 1。

同理，若希望這三個 flex items 的尺寸比例分別為 3 : 2 : 1，則可設定：

.item1 {
  flex: 3;   /* 將得到容器中剩餘空間的 3/(3+2+1)＝3/6 等份 */
}

.item2 {
  flex: 2;   /* 將得到容器中剩餘空間的 2/(3+2+1)＝2/6 等份 */
}

.item3 {
  flex: 1;   /* 將得到容器中剩餘空間的 1/(3+2+1)＝1/6 等份 */
}

且不論容器如何變動(例如縮放視窗時)，比例皆為 3 : 2 : 1。

flex 屬性介紹到這囉，接下來將介紹 flex 的對齊方式～
明天見囉

持續看 flex 規範中，或許之後會再重新整理一次文章～

參考資料

W3C-CSS Flexible Box Layout Module Level 1
MDN-Controlling Ratios of Flex Items Along the Main Axis