- column(欄)(方向為上到下)
- row(列)(方向為左到右)
- row：從左到右.
- row-reverse：從右到左.
- column：從上到下.
- column-reverse：從下到上.
- main-axis：主軸
- main-start：主軸-起點邊界
- main-end：主軸-結束邊界
- main-size：項目與容器的主軸大小
- cross-axis：交叉軸
- cross-start：交叉軸-起點邊界
- cross-end：交叉軸-結束邊界
- cross-size：項目與容器的交叉軸大小
PS：主軸的方向並不是固定的，而是由排列方式來決定主軸(main-axis)的方向，另外與主軸垂直的稱為交叉軸(cross-axis).
1.row 圖示 (排列方向為從左到右)
(以下圖示：紅色箭頭=main-axis、黃色箭頭=cross-axis)
2.row-reverse 圖示 (排列方向為從右到左)
PS:其實就是主軸方向翻轉，而交叉軸的方向不變.
3.column 圖示 (排列方向為從上到下)
PS:column排列方式為上到下，所以主軸方向(main-axis)就會變成上到下.
4.column-reverse 圖示 (排列方向為從下到上)
| 排列方式 | 主軸方向 | 交叉軸方向 |
|---|---|---|
| row | 從左到右 | 從上到下 |
| row-reverse | 從右到左 | 從上到下 |
| column | 從上到下 | 從左到右 |
| column-reverse | 從下到上 | 從左到右 |
ㄧ ~ 三 介紹的都是在講flexbox的相關概念，再來就是藉由flexbox語法上的實作，來理解屬性上的設定與應用.
| 屬性 | 作用 | 範例 |
|---|---|---|
| display | 設定為flexbox佈局 | demo |
| flex-direction | 項目 排列方向 | demo |
| flex-wrap | 項目 換行方式 | demo |
| justify-content | 項目 主軸對齊方式 | demo |
| align-items | 項目 交叉軸對齊方式(單行) | demo |
| align-content | 項目 交叉軸對齊方式(多行) | demo |
| 屬性合併 | 作用 | 範例 |
|---|---|---|
| flex-flow | direction + wrap | demo |
| 屬性名稱 | 說明 | |
| 參數 | 功能 | |
| display | 設定為flexbox佈局 | |
| flex | 被設定元素會有block的特性 | |
| inline-flex | 被設定元素會有inline-block的特性 | |
| flex-direction | 容器項目 排列方向 | |
| row (默認值) | 從左到右排列項目 | |
| row-reverse | 從右到左排列項目 | |
| column | 從上到下排列項目 | |
| column-reverse | 從下到上排列項目 | |
| flex-wrap | 容器項目 換行方式 | |
| nowrap (默認值) | 不換行 | |
| wrap | 換行 多餘項目排在下一行 | |
| wrap-reverse | 換行 多餘項目排在上一行 | |
| justify-content | 容器項目 主軸(main-axis)對齊方式 | |
| flex-start (默認值) | 往起始邊界對齊 | |
| center | 往中間對齊 | |
| flex-end | 往結束邊界對齊 | |
| space-between | 第一項目靠起始邊界.最後項目靠終點邊界.其餘空白平均分配剩下項目左右兩側 | |
| space-around | 將空白平均分配每個項目左右兩側 | |
| space-evenly | 將空白平均分配給項目之間的間隔 | |
| align-items | 容器項目 交錯軸(cross-axis)對齊方式 | |
| flex-start | 往起始邊界對齊 | |
| center | 往中間對齊 | |
| flex-end | 往結束邊界對齊 | |
| baseline | 每個項目基線對齊 | |
| stretch (默認值) | 將項目的cross-size撐開,填滿與容器相同cross-size. | |
| align-content | 當有多行時.以行為單位的交錯軸(cross-axis)對齊方式 | |
| flex-start | 往起始邊界對齊 | |
| center | 往中間對齊 | |
| flex-end | 往結束邊界對齊 | |
| space-between | 第一行靠起始邊界.最後行靠結束邊界.其餘空白平均分配剩下每行左右兩側 | |
| stretch (默認值) | 將每行的cross-size撐開.填滿與容器相同cross-size | |
| 屬性 | 作用 | 範例 |
|---|---|---|
| flex-basis | 項目 初始大小 (main-size) | demo |
| flex-grow | 項目 彈性增長比例. | demo |
| flex-shrink | 項目 彈性壓縮比例. | demo |
| order | 項目 排列順序 | demo |
| align-self | 項目 本身交叉軸對齊方式(覆蓋容器align-items的設定) | demo |
| 屬性合併 | 作用 | 範例 |
|---|---|---|
| flex | grow + shrink + basis | demo |
| 屬性名稱 | 說明 | |
| 參數 | 功能 | |
| flex-basis | 項目初始大小(main-size) | |
| auto 或 0 (默認值) | 項目原始大小 | |
| 元素單位 | 如：%、em、rem、px | |
| flex-grow | 項目增長比例 | |
| 數字(默認值:0) | 依照數字比例彈性增長 | |
| 0 | 不做彈性增長 | |
| flex-shrink | 項目壓縮比例 | |
| 數字 (默認值:1) | 依照數字比例彈性壓縮 | |
| 0 | 不做彈性壓縮 | |
| order | 項目排列順序 | |
| 數字(默認值:0) | 數字越小排越前面 | |
| align-self | 項目本身 交叉軸對齊方式(覆蓋容器align-items的設定) | |
| flex-start | 往起始邊界對齊 | |
| center | 往中間對齊 | |
| flex-end | 往結束邊界對齊 | |
| baseline | 每個項目基線對齊 | |
| stretch (默認值) | 將項目的cross-size撐開.填滿與容器相同cross-size | |
| 合併屬性 | 參數 | 簡化 | 說明 |
| flex | flex-grow + flex-shrink + flex-basis | ||
| 0 1 auto | flex:initial | main-size會彈性壓縮;flex項目默認設定 | |
| 0 0 auto | flex:none; | 固定main-size.為項目原始的main-size | |
| 1 1 auto | flex:auto; | main-size會自動彈性 | |