前言

經過幾天的基礎打底，前面的鋪陳是為了接下來能更順利地進階到flexbox，事不宜遲就直接開始吧！

介紹

彈性框佈局模組（flexible box layout），簡稱也就是flexbox，是一種用於在項目之間分配行列空間的一維佈局模型（one-dimensional layout model），並包含多種對齊功能。

一維佈局，會聯想到平面或是X軸Y軸交錯，在flexbox時指的是水平和垂直（horizontal and vertical）的佈局，所以一維佈局意思是flexbox一次處理一個維度，也就是行以及列的佈局。

flexbox的兩軸

使用flexbox時要注意兩軸--主軸（main axis）和交叉軸（cross axis）。

主軸 main axis

主軸由 flex-direction 定義，它有四個值：

• row
• row-reverse
• column
• column-reverse

當設定 row 和 row-reverse 屬性值時，主軸將沿著 inline direction 排列（左到右或是右到左的水平排列）。

而當設定 column 和 column-reverse 屬性值時，主軸將沿著 block direction 排列（頁面頂部到底部或是底到頂部的垂直方向排列）。

交叉軸 cross axis

交叉軸則跟主軸相反，
若是 flex-direction （主軸）設定為 row 和 row-reverse 水平排列，交叉軸則以垂直方向向下延伸。

若是 flex-direction （主軸）設定為 column 和 column-reverse 垂直排列，交叉軸則以水平方向沿著列延伸。

兩軸如何影響CSS的書寫模式（writing modes）

flexbox可以做到書寫模式感知（writing mode aware），影響CSS如何支援各個語言不同書寫方式，讓不同書寫方式也不影響排版佈局，
就Mdn舉的範例來說，英文書寫方向是左到右，當 flex-direction 設定為 row 時，主軸起始邊緣在左側、終止邊緣在右側；但阿拉伯語書寫方向則是右到左，主軸起始邊緣在右側、終止邊緣在左側，因為兩者都為水平書寫方向，所以這兩種情況下交叉軸起始位置都為在頂部，終止位置在底部。

flexbox本身具有特別的起始與終點概念，而非用左、右、上和下去描述。水平的起始與終點、垂直的起始與終點，起始跟終點方式可以更好理解flex item流入方向。

參考資料

Mdn - flexbox

W3school - flexbox

CSS3的flexbox版面配置