3.30 Flexbox 排版 - Container
Last updated
Last updated
Flexbox 排版模式是 CSS3 才有的東西，所有如果要使用，請留意它的支援度。來看一下 Flexbox 的支援度。
這是一個 CSS3 才出現的規範，Flexbox 引進了新的排版模式，解決元素分佈不均、空白等距無法自動均分的現象。所以透過 Flexbox 的相關樣式設定，來讓子元素自動排列。
或
flex 會佔滿父元素的整個寬度，如同區塊元素一樣；inline-flex 則是類似行內區塊元素，與其他周圍元素會在同一行。
看看以下例子：
發現 ul 內層的 li 變成水平排列了(且沒有空格問題)，到這邊我們需要先瞭解幾件事情：
ul 標籤已經變成了 Flexbox Model 排版模式，會直接影響到其 第一層子元素(Flex item(s)) 的排版行為。
ul 是 Flexbox Model 中的 Flex container。
li 是 Flexbox Model 中的 Flex item(s)，因為是 ul 的第一層子元素。
此範例適用於任何父層、子層元素，不僅限於 ul、li。
Items ( 此例為 li ) 的高度，會跟著 Container ( 此例為 ul ) 的高度增加。
當一個元素被設定成 display: flex; 或 display: inline-flex; 時，就會有 Main Axis(主軸) 和 Cross Axis(交錯軸)這概念：
當 flex-direction 是 row(預設) 或 row-reverse：
當 flex-direction 是 column 或 column-reverse：
內層元素(li)沿著 主軸(Main Axis) 來排列，有四種方向：
row：這是預設，由左至右。
column：由上至下。
row-reverse：row 的相反。
column-reverse：column 的相反。
內層元素過多的時候，該如何斷行，有三種設定值：
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 同時用的縮寫，例如：
等同於：
透過 justify-content 來設定 Flex Items 在 Main Axis 中該如何排列，共有六種：
flex-start：這是預設值，全部置左。
flex-end：全部置右。
center：置中。
space-between：各個 Flex Item 的空白間距相等。
space-evenly：各個 Flex Item 的周圍間距相等。
space-around：各個 Flex Item 的左右空白間距相等，如下圖：
範例：
透過 align-content 來設定 Flex Items 在 Cross Axis(交錯軸) 中該如何排列，共有七種。
註：因為 flex-wrap 預設是 nowrap，即不能斷行，所以跟本無法針對「交錯軸」來排列。所以 align-content 屬性若要有效，必須將 flex-wrap 的屬性值設定成 wrap 或 wrap-reverse 才會有效。
align-content 可以設定的值有：
flex-start
flex-end
center
space-between
space-evenly
space-around
stretch：這是預設值，自動延展。
透過 align-items 來設定沿著主軸同一排的各 Flex Items 之間，在 Cross Axis 中該如何排列，共有五種可以設定的值：
flex-start：置頂。
flex-end：置底。
center：置中。
stretch：(預設值)，自動延伸。
baseline：依據 baseline 來做對齊，如下圖：
flex-direction 預設為 row：
將 flex-direction 改成 column 再觀察看看：
