3.30 Flexbox 排版 - Container

Last updated 1 year ago

Flexbox 排版模式是 CSS3 才有的東西，所有如果要使用，請留意它的支援度。來看一下。

什麼是 Flexbox Model？

這是一個 CSS3 才出現的規範，Flexbox 引進了新的排版模式，解決元素分佈不均、空白等距無法自動均分的現象。所以透過 Flexbox 的相關樣式設定，來讓子元素自動排列。

display: flex;

或

display: inline-flex;

flex 會佔滿父元素的整個寬度，如同區塊元素一樣；inline-flex 則是類似行內區塊元素，與其他周圍元素會在同一行。

<ul>
  <li>第一項</li>
  <li>第二項</li>
  <li>第三項</li>
</ul>

ul{
  /* 也可以是：display: inline-flex; 此為「行內 Flex」 */
  display: flex;
}

看看以下例子：

發現 ul 內層的 li 變成水平排列了(且沒有空格問題)，到這邊我們需要先瞭解幾件事情：

當一個元素被設定成 display: flex; 或 display: inline-flex; 時，就會有 Main Axis(主軸) 和 Cross Axis(交錯軸)這概念：

當 flex-direction 是 row(預設) 或 row-reverse：

當 flex-direction 是 column 或 column-reverse：

內層元素(li)沿著 主軸(Main Axis) 來排列，有四種方向：

ul{
  display: flex;
  
  /* row(default) | column | row-reverse | column-reverse */
  flex-direction: row;
}

內層元素過多的時候，該如何斷行，有三種設定值：

nowrap：(預設值)，代表即使 Flex Items 數量過多，依然不會斷行，Flex Container 都會試圖去容納這些 Flex Items 在同一個軸。
wrap：代表當 Flex Items 數量過多，多到 Flex Container 裝不下的時候，會斷行，斷行會延著交錯軸(Cross Axis)。
wrap-reverse：代表當 Flex Items 數量過多，多到 Flex Container 裝不下的時候，會斷行，斷行會延著交錯軸(Cross Axis)的反向。

單純只是個 flex-direction 和 flex-wrap 同時用的縮寫，例如：

ul{
  flex-flow: row wrap-reverse;
  
  /* 預設值是： */
  /* flex-flow: row nowrap; */
}

等同於：

ul{
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

透過 justify-content 來設定 Flex Items 在 Main Axis 中該如何排列，共有六種：

範例：

透過 align-content 來設定 Flex Items 在 Cross Axis(交錯軸) 中該如何排列，共有七種。

註：因為 flex-wrap 預設是 nowrap，即不能斷行，所以跟本無法針對「交錯軸」來排列。所以 align-content 屬性若要有效，必須將 flex-wrap 的屬性值設定成 wrap 或 wrap-reverse 才會有效。

align-content 可以設定的值有：

透過 align-items 來設定沿著主軸同一排的各 Flex Items 之間，在 Cross Axis 中該如何排列，共有五種可以設定的值：

flex-direction 預設為 row：

將 flex-direction 改成 column 再觀察看看：

Last updated 1 year ago