Flexbox 對齊與彈性尺寸筆記
記錄 Flexbox 的主軸與交錯軸對齊、flex-direction、flex-wrap，以及 flex-grow、flex-shrink、flex-basis 等常用屬性。
W
這篇是當時練習 Flexbox 時整理的屬性與對齊方式筆記。
align-items
align-items 用來設定 Flex Item 在**交錯軸（Cross Axis）**上的對齊方式。
flex-start
.container {
display: flex;
align-items: flex-start;
}
center
.container {
display: flex;
align-items: center;
}
stretch
.container {
display: flex;
align-items: stretch;
}
flex-end
.container {
display: flex;
align-items: flex-end;
}
baseline
.container {
display: flex;
align-items: baseline;
}
align-self
align-self 可以單獨設定某一個 Flex Item 在交錯軸上的對齊方式，覆蓋父層的 align-items。
.item {
align-self: center;
}
Flexbox 的主軸與交錯軸
啟用 Flexbox：
.container {
display: flex;
}
幾個常用屬性：
flex-direction：決定主軸的方向flex-wrap：決定項目是否換行justify-content：設定主軸上的對齊方式align-items：設定交錯軸上的對齊方式align-self：設定單一項目的交錯軸對齊
flex-flow
flex-flow 是 flex-direction 與 flex-wrap 的縮寫。
例如：
.container {
flex-flow: row wrap;
}
等同：
.container {
flex-direction: row;
flex-wrap: wrap;
}
flex-direction
flex-direction: row | row-reverse | column | column-reverse;
row
預設值。
一般由左到右排列：
1 → 2 → 3
row-reverse
與 row 相反：
3 ← 2 ← 1
column
將主軸改成垂直方向，由上往下排列。
1
↓
2
↓
3
column-reverse
與 column 相反，由下往上排列。
flex-wrap
控制 Flex Item 是否換行。
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap
預設值，不換行。
.container {
flex-wrap: nowrap;
}
wrap
空間不足時換到下一行。
.container {
flex-wrap: wrap;
}
wrap-reverse
同樣會換行，但是交錯軸的排列方向相反。
.container {
flex-wrap: wrap-reverse;
}
flex-grow
flex-grow 設定當容器還有剩餘空間時，各個 Flex Item 可以分配多少比例。
.item {
flex-grow: 1;
}
例如三個 Item 都設定：
.item {
flex-grow: 1;
}
剩餘空間就會依相同比例分配。
flex-shrink
flex-shrink 設定容器空間不足時，Flex Item 的收縮比例。
.item {
flex-shrink: 1;
}
預設值是 1。
flex-basis
flex-basis 設定 Flex Item 在主軸上的初始尺寸。
.item {
flex-basis: 200px;
}
也可以使用：
.item {
flex-basis: auto;
}
預設值是 auto。
flex 縮寫
flex 可以一次設定：
flex-grow
flex-shrink
flex-basis
格式：
.item {
flex: flex-grow flex-shrink flex-basis;
}
例如：
.item {
flex: 1 1 auto;
}
三個屬性的初始值分別是：
flex-grow: 0
flex-shrink: 1
flex-basis: auto
因此 flex 的初始值相當於：
.item {
flex: 0 1 auto;
}
order
order 可以改變 Flex Item 的顯示順序。
.item {
order: 1;
}
數字越小會排得越前面，也可以使用負數：
.item {
order: -1;
}
垂直置中範例
當時留下來的一個 Loading 區塊範例：
.loading-box {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
min-height: 100%;
.loading-area {
position: relative;
display: flex;
align-items: center;
flex-grow: 1;
}
}
父層使用：
flex-direction: column;
讓內容垂直排列。
.loading-area 再透過：
display: flex;
align-items: center;
flex-grow: 1;
讓區塊填滿剩餘空間，並將內容在交錯軸上置中。
2026 年後記
這篇是 2020 年學習 Flexbox 時留下來的筆記。
Flexbox 到現在仍然是 CSS 版面配置非常常用的方式，這篇記錄的 flex-direction、flex-wrap、justify-content、align-items、flex-grow、flex-shrink 與 flex-basis 等屬性也仍然適用。
整理舊文時修正了幾個當時筆記中的錯誤，例如 flex-grow 的名稱、flex 的初始值，以及 row 的排列方向，其他內容則保留作為當時的 Flexbox 學習紀錄。