---
# System prepended metadata

title: "\U0001F4D8《刻板必備：Flex 專章》"
tags: [CSS]

---

# 📘《刻板必備：Flex 專章》

## 一、什麼是 Flex？為什麼需要它？

### 🔧 Flex 是什麼角色？
Flex 是一種「彈性排列系統」，能自由控制元素的排列方向、對齊方式、間距分配與尺寸伸縮。
它特別適合「一維排列」（橫向或直向），能讓畫面整齊又好對齊，排版從此不再卡卡。

🎯 語感翻譯：Flex 就像「排隊長」，負責整隊，控制每個人站在哪裡、間距多少、能不能變胖變瘦。

---

### 1. Flex 與其他 display 排法的差異

| 類型           | 排列特性                   | 可控制寬高 | 適合用途               |
|----------------|----------------------------|------------|------------------------|
| block          | 元素一行一個，撐滿整行     | ✅         | 區塊段落               |
| inline         | 排成一行，但無法設寬高     | ❌         | 內文小元素             |
| inline-block   | 可設定寬高，對齊難控制     | ✅         | 表單欄位、按鈕群組     |
| flex           | 彈性排列，自由控制對齊間距 | ✅         | 排列整隊的主力         |

---

### 2. 想要達成什麼效果？（傳統寫法 vs Flex 寫法）

🎯 效果：讓多個元素等寬平均分布  
❌ 傳統寫法：手動用 `width: 33.33%` + 調整 `margin`  
✅ Flex 寫法：用 `flex: 1` + `gap` 自動平分

🎯 效果：子元素寬度自動依剩餘空間延展  
❌ 傳統寫法：需要寫 calc 或搭配 js 動態撐寬  
✅ Flex 寫法：加 `flex-grow: 1` 自動撐開

🎯 效果：橫向置中 + 垂直置中（九宮格中央）  
❌ 傳統寫法：搭配 `text-align: center` + `line-height` or `position + transform` 等黑魔法  
✅ Flex 寫法：`justify-content: center` + `align-items: center` 一行解決

🎯 效果：排到滿會自動換行  
❌ 傳統寫法：搭配 `float` + `clear: both`，很難掌握換行行為  
✅ Flex 寫法：加 `flex-wrap: wrap` 即可

🎯 效果：卡片間距一致且不影響寬度計算  
❌ 傳統寫法：用 `margin` 控距離，左右空白會多出寬度  
✅ Flex 寫法：用 `gap` 控間距，空間平均分配

---

### 3. 適用情境
📌 什麼情況適合出動 Flex？來看幾個典型場景。

Flex 非常適合「流程式的、方向性強」的區塊排列，例如：

- 導覽列：橫向排列，左右貼齊，使用 space-between
- 表單欄位：一排 label + input
- 登入卡片：上下左右置中，用 flex 搭配 min-height
- 多個按鈕等距排列：用 gap 或 space-around
- 卡片群組 RWD：flex-wrap: wrap + gap
- 圖片 + 說明文字排在一行：row + align-items

🔎 總結
如果你想「讓一群元素怎麼排」、「怎麼對齊」、「怎麼分空間」──
那你就該用 Flex。

---
## 二、Flex 排法原理 × 主軸 × 對齊 × 空間控制（🧠 Flex 成立的核心邏輯）

### 1. 排法原理（什麼是主軸 × 交錯軸？Flex 為何要這樣設計？）
🔧 Flex 是一維排版系統，專門用來「排一排東西」。  
為了讓這件事變得可控，它定義了兩個軸：

- 主軸（main axis）：用來決定元素「怎麼排」的方向  
- 交錯軸（cross axis）：用來控制元素「怎麼對齊」的方向

🎯 語感翻譯：
主軸決定你們排成一列還是一欄，交錯軸決定大家對齊在哪（上？中？下？）

設計這樣的原因是：
👉 真實畫面常見需求是「一排有間距、能置中、能自動收縮」  
👉 分清楚排列方向與對齊方向，可以**分工處理排版控制**

---

### 2. 設定 Flex 代表哪些控制？
設定 display: flex 後，整個父容器就變成「彈性盒」，此時你可以控制：

- 排版流向 → `flex-direction`（主軸是橫還是直）
- 是否換行 → `flex-wrap`（不換 / 換行 / 反向）
- 主軸對齊點 & 空間分配 → `justify-content`
- 交錯軸對齊點 & 對齊方式 → `align-items`
- 多行時的群體對齊 → `align-content`

🎯 一句話記住：  
你可以控制**一整排要怎麼排、要不要換行、要對齊哪裡**

---

### 3. justify-content / align-items / align-content（這三個差在哪？）

| 屬性              | 控制對象             | 控制方向   | 用途說明                           |
|-------------------|----------------------|------------|------------------------------------|
| justify-content    | 所有子項目（整排）   | 主軸       | 控制整排「對齊哪」或「怎麼分空間」 |
| align-items        | 每個子項目（單一）   | 交錯軸     | 控制每個元素「在交錯軸上站哪」     |
| align-content      | 多行群組（整體）     | 交錯軸     | 控制多行之間的「間距 / 分佈」      |

🎯 語感：
justify = 排排站靠哪邊  
align-items = 每人多高、拉不拉  
align-content = 每一排之間的間距感

---

### 4. 對齊語法 × 九宮格分佈說明
Flex 給你一個強大的能力：**讓子項目對齊在九宮格的任何一格**

📌 方法：
- 主軸：用 `justify-content`
- 交錯軸：用 `align-items`

🎯 對齊語感九宮格：
（start / center / end）
（center）
（end）
⬛ ⬛ ⬛
⬛ ⬛ ⬛
⬛ ⬛ ⬛


你想站在哪個點，就用哪個值。

---

#### 📎 補充：justify-content 與 align-items 中「除了九宮格以外的概念」

##### 1. justify-content：主軸方向的「負空間分配方式」
除了設定「站哪裡」（start / center / end），你也可以設定「剩下的空間怎麼分」。

🎯 語感翻譯：有多的空位，要怎麼把它們分給大家站得剛剛好？

| 值              | 分配邏輯說明                                       |
|------------------|--------------------------------------------------|
| space-between    | 頭尾貼邊，剩下空間分給中間空隙                    |
| space-around     | 每個元素前後都留「一半」空格                     |
| space-evenly     | 所有元素間的空格「完全平均」，頭尾也有空格        |

📘 小補充：「負空間」指的是排完東西後剩下的空白區域，這系列語法就是幫你「分空白」。

—

##### 2. align-items：交錯軸方向的「基準線與撐滿行為」
除了基本對齊點（start / center / end），還有兩個進階用法：

| 值         | 功能說明                                           |
|------------|----------------------------------------------------|
| stretch     | 預設值，讓子項目的高度（或寬度）撐滿容器           |
| baseline    | 讓所有項目依照「文字的底線」對齊（常見於圖文混排） |

🎯 baseline 是什麼？  
像是圖示 + 文字排在一起時，希望圖示與文字底部對齊，而不是純粹以高度置中。  
這樣看起來會更穩、更自然。

📘 使用場景舉例：
icon + 文字、圖片 + 段落、標籤 + 小圖示

—

##### 一眼對照表：

| 屬性            | 補充概念類型       | 關鍵用途                     |
|-----------------|--------------------|------------------------------|
| justify-content | 主軸 × 分空間       | space 系列 → 平均分空格       |
| align-items     | 交錯軸 × 對齊點設定 | stretch → 撐滿、baseline → 對齊字底 |

—
##### 🧩 gap 是什麼？
gap 控制「元素之間」的距離，是 Flex 專屬的「間距控制器」  
不會影響最左與最右的距離、不需加 margin、不會炸版

---

### 5. 子項尺寸控制：flex-grow / shrink / basis
🎯 Flex 除了幫你排隊，也幫你決定「每個人要站多寬」

- `flex-grow`：有多餘空間時，誰要變胖、變幾倍  
- `flex-shrink`：空間不夠時，誰要縮、縮幾倍  
- `flex-basis`：初始寬度（比 width 更聽話）

📌 縮寫寫法：
flex: grow shrink basis;

範例：
flex: 1 1 200px; // 可長可縮，初始200px
flex: 0 1 auto; // 預設值

---

### 6. 整體設計哲學
Flex 的本質是一種「排版自動化思維」  
它的目標不是讓你每個元素都去量，而是讓容器決定佈局、元素自己配合。

🔧 它解決的核心問題：
- 傳統 margin / float 佈局很難控整齊、對齊不直覺
- 寬度百分比不好維護（尤其畫面變化時）
- 多行排版 / 垂直置中是痛點中的痛點

🎯 Flex 的哲學是：
> 「你決定規則，Flex 幫你排好。」  
> 排方向、排距離、排對齊，全都交給它。

---
## 三、Flex 的屬性清單 × 父層 / 子項對照
（📌 看不懂語法 / 不知道加哪邊時，來這裡查！）

### 🔧 Flex 的屬性可以分為兩大類：

1. 父層控制：容器的行為、排列方向、對齊方式、間距等
2. 子項控制：每一個子元素的尺寸、順序、個別對齊等

🎯 語感翻譯：
Flex 就像是「隊伍教官」，你可以下兩種命令：
→ 對整隊說「大家照這個方向排！」  
→ 對個人說「你站這裡、長一點、別縮、晚點出場」

---

### 1️⃣ Flex 容器屬性（父層要設定）
| 屬性             | 預設值         | 功能說明                               |
|------------------|----------------|----------------------------------------|
| display          | -              | 啟用 Flex 排列（加在容器上）           |
| flex-direction   | row            | 決定主軸方向（橫向或直向）              |
| flex-wrap        | nowrap         | 是否換行                                |
| justify-content  | flex-start     | 主軸對齊 / 空間分配                     |
| align-items      | stretch        | 交錯軸對齊（單行）                      |
| align-content    | stretch        | 多行對齊（需搭配 wrap）                |
| gap              | 0              | 項目之間的間距                          |
| flex-flow        | row nowrap     | flex-direction + flex-wrap 的縮寫      |

📘 小補充：`flex-flow` 很常用在 figma 對應 flex 容器的自動設定

---

### 2️⃣ Flex 子項屬性（加在每個子元素上）
| 屬性         | 預設值        | 功能說明                                     |
|--------------|---------------|----------------------------------------------|
| flex         | 0 1 auto      | grow / shrink / basis 三合一寫法             |
| flex-grow    | 0             | 多餘空間時的放大比例                         |
| flex-shrink  | 1             | 空間不足時的縮小比例                         |
| flex-basis   | auto          | 初始寬度 / 高度（依主軸）                    |
| align-self   | auto          | 覆蓋 align-items，針對單一項目對齊           |
| order        | 0             | 改變子項目出現順序                           |
| margin: auto | -             | 可用來單獨置中（要搭配寬度設定）             |
📘 小補充：`flex: 1` 等同於 `flex-grow: 1; flex-shrink: 1; flex-basis: 0`

---

### 📎 常見子項屬性使用情境對照

| 目標效果               | 推薦語法                         |
|------------------------|----------------------------------|
| 全部子項等寬分配       | `flex: 1`                        |
| 指定某項不可縮放       | `flex-shrink: 0`                 |
| 某項特別高 / 低 / 寬   | `flex-basis: 200px`              |
| 單一子項垂直置中       | `align-self: center`             |
| 子項自動置中整排       | `margin: auto` + `width` 搭配使用  |

※子項屬性常見組合與語感筆記
　- flex: 1  
　　→ 自動撐滿可用空間（可縮可長）
　- flex: 0 1 auto  
　　→ 預設值，不撐空間，可縮小，寬度依內容
　- flex: 1 0 200px  
　　→ 撐滿空間，不縮小，初始寬度 200px
　- margin: auto  
　　→ 若設定寬度，可用來自動置中；也可搭配 flex 對齊空間自動填補
　- align-self: center  
　　→ 某一個子元素單獨置中（例如：登入按鈕特別居中）

---

### 🧠 小總結

Flex 的語法不是「一次記住很多個屬性」，而是：
> 🎯 看你想對哪一層下命令：「隊伍 vs 單人」

- 要控制整排隊伍 → 用容器屬性（父層）
- 要控制個別站位與行為 → 用子項屬性（子層）

Flex 的屬性設計哲學，就是把「空間控制」拆成兩層思考：
→ 要大家一起站好  
→ 還要每個人知道自己該站哪裡、多胖、多瘦

---

### 📎 補充：Flex 屬性語法全集（速查 × 對照 × 中文語感版）
※ 本區為所有 Flex 屬性及值的完整列舉，適合查找語法組合、熟悉語感概念用。

—

#### 屬性：display  
值清單：
- flex：啟用彈性盒模型（開啟 flex 的前提）

—

#### 屬性：flex-direction（主軸方向）  
值清單：
- row（預設）　　　　→ 水平排列（左 → 右）  
- row-reverse　　　　→ 水平反向排列（右 → 左）  
- column　　　　　　→ 垂直排列（上 → 下）  
- column-reverse　　 → 垂直反向排列（下 → 上）

—

#### 屬性：flex-wrap（是否換行）  
值清單：
- nowrap（預設）　　　→ 不換行，強塞一行  
- wrap　　　　　　 　 → 自動換行（從上往下）  
- wrap-reverse　　　　→ 換行但反向（從下往上）

—

#### 屬性：flex-flow（排法縮寫）  
值結構：
- ` flex-direction / flex-wrap   `
範例：row wrap、column nowrap

—

#### 屬性：justify-content（主軸對齊 × 負空間分配）  
值清單：
- flex-start（預設）　　 → 貼齊主軸起點（左 / 上）  
- center　　　　　　　　→ 主軸置中  
- flex-end　　　　　　　→ 貼齊主軸終點（右 / 下）  
- space-between　　　　 → 頭尾貼邊，中間平均分空格  
- space-around　　　　　→ 每個元素前後有半格空隙  
- space-evenly　　　　　→ 所有空隙完全一致

—

#### 屬性：align-items（交錯軸對齊）  
值清單：
- stretch（預設）　　　→ 撐滿容器  
- flex-start　　　　　 → 靠上 / 靠左  
- center　　　　　　　→ 垂直居中  
- flex-end　　　　　　→ 靠下 / 靠右  
- baseline　　　　　　→ 對齊文字底線（圖文混排專用）

—

#### 屬性：align-content（多行交錯軸對齊，需 wrap）  
值清單：
- stretch（預設）　　　→ 多行填滿容器  
- flex-start　　　　　 → 多行靠上  
- center　　　　　　　→ 多行置中  
- flex-end　　　　　　→ 多行靠下  
- space-between　　　 → 多行之間空格平均  
- space-around　　　　 → 每行上下都有空隙  
- space-evenly　　　　 → 所有行距離一致

—

#### 屬性：gap（項目之間間距）  
值清單：
- 數值（如 8px, 1rem） → 不需寫 margin，也不會影響外框尺寸

—

#### 屬性：flex（縮寫語法）  
值結構：
- ` grow / shrink / basis`  
常見範例：
- 1　　　　　　　→ 撐滿可用空間（1 1 0）  
- 0 1 auto　　　→ 預設值（不放大，可縮，看內容）  
- 1 0 200px　　→ 不縮小、固定初始 200px，會撐滿剩餘

—

#### 屬性：flex-grow（剩餘空間放大比例）  
值清單：
- 數值（預設 0） → 1 = 撐滿；0 = 不撐

—

#### 屬性：flex-shrink（空間不足時縮小比例）  
值清單：
- 數值（預設 1） → 1 = 會縮；0 = 不縮

—

#### 屬性：flex-basis（初始尺寸）  
值清單：
- auto（預設） → 跟內容寬度走  
- 0　　　　　 → 忽略內容，從 0 開始算  
- 長度值　　　 → 例如 200px、50%

—

#### 屬性：align-self（單一子項對齊）  
值清單：
- auto（預設）　　 → 沿用 align-items 設定  
- flex-start　　　　→ 貼上 / 貼左  
- center　　　　　 → 垂直置中  
- flex-end　　　　 → 貼下 / 貼右  
- stretch　　　　　→ 撐滿容器  
- baseline　　　　 → 對齊文字底線

—

#### 屬性：order（順序控制）  
值清單：
- 數值（預設 0） → 數字越小越先出現

—

#### 屬性：margin  
值清單：
- auto → 可搭配寬度進行置中或推擠（例如左右 margin: auto 實現水平置中）


---
## 四、與 Figma Auto Layout 功能對照表（🎨 設計師語言 × 前端語言對照轉換區）
對應 Figma 裡面常見的 Auto Layout 設定，轉成實際 CSS Flex 的語法與語感理解。

---

### 1️⃣ Auto Layout 開啟 → display: flex

🎯 在 Figma 中只要點下 Auto Layout，就代表這個容器要有「排列邏輯」
→ 對應到 CSS，就是 `display: flex`

🈶 Figma 操作語感：開啟後會出現 direction / spacing / alignment 等設定項

- 垂直排列：flex-direction: column
- 水平排列：flex-direction: row
- 巢狀 Auto Layout → 巢狀 flex 容器

---

### 2️⃣ 排列方向：主軸 direction

| Figma 選項（中文說明） | 對應 CSS                        |
|--------------------------|----------------------------------|
| vertical 垂直排列        | flex-direction: column           |
| horizontal 水平排列      | flex-direction: row              |

📘 小補充：Figma 沒有提供 row-reverse / column-reverse，但可在 CSS 裡反轉主軸

---

### 3️⃣ 間距設定（Spacing between items）→ gap

| Figma 選項（中文說明）     | 對應 CSS            |
|----------------------------|---------------------|
| spacing: 12（元件間距）    | gap: 12px           |

🈶 功能說明：設定子元素之間的空隙，不會影響容器寬度或第一個 / 最後一個的位置

---

### 4️⃣ Fill container → flex-grow: 1 或 align-self: stretch

| Figma 選項（中文說明）        | 對應 CSS 語法                 |
|-------------------------------|-------------------------------|
| Fill container（撐滿容器）     | flex-grow: 1（主軸撐滿）       |
|                               | align-self: stretch（交錯軸撐滿）  |

📘 小補充：  
- 主軸撐滿 → flex-grow: 1  
- 交錯軸撐滿 → align-self: stretch  
🈶 操作語感：會讓按鈕、欄位等元件撐滿可用區域

---

### 5️⃣ Hug contents → width: auto / flex-shrink

| Figma 選項（中文說明）         | 對應 CSS                       |
|--------------------------------|--------------------------------|
| Hug contents（包覆內容）        | width: auto（依內容寬）         |
|                                | flex-shrink: 1（必要時會縮）    |

🈶 功能說明：元件會盡可能小，只包住內容本身，常見於按鈕、標籤、圖示組合

---

### 6️⃣ Fixed width → width: 100px（或任意固定值）

| Figma 選項（中文說明）      | 對應 CSS            |
|-----------------------------|---------------------|
| Fixed width（固定寬度）     | width: 100px 等     |

🈶 功能說明：內容再多也不會變寬，常見於卡片、欄位等元件定尺寸

---

### 7️⃣ 組合補充：Auto Layout 最常見搭配組合

| Figma 行為                          | 對應 CSS 組合語法                                        |
|-----------------------------------|-----------------------------------------------------------|
| 橫向排列 + 均距                   | display: flex; flex-direction: row; justify-content: space-between; gap: 12px;  
| 垂直置中元素                       | display: flex; align-items: center;  
| 整張卡片上下左右置中               | display: flex; justify-content: center; align-items: center; height: 100vh;  
| 巢狀區塊 + 元素間距               | 多層 display: flex + gap  

---

📘 小補充：Figma 的「Auto Layout」= HTML 裡的「結構階層」+ CSS 裡的「排列邏輯」
→ 要轉寫成前端時，**結構順序也要照著巢狀邏輯轉成 HTML**

---

### 📎 延伸補充：常見 UI 對齊情境轉換對照

| 設計語言             | 前端語言                         |
|----------------------|----------------------------------|
| Icon + 文字 對齊     | align-items: baseline            |
| 按鈕靠右             | margin-left: auto（在最後一個項目上） |
| 文字上下置中         | line-height 或 align-items: center |
| 單欄欄位撐滿         | width: 100% 或 flex-grow: 1      |

🎯 用這區對照 Figma 畫面 → 實作語法，非常適合轉換「設計視角」成「程式邏輯」

---
## 總結：Flex 的核心整理
這份筆記整理了 Flex 的完整概念、語法分類與實作邏輯。

- Flex 的出現，是為了解決排列方向、對齊方式、空間分配等傳統排版痛點。
- Flex 的核心概念是「主軸 × 交錯軸 × 空間控制」三個面向。
- 所有語法都分為兩類：父層控制整體排列（display, flex-direction, justify-content...），子項控制單一元素行為（flex, order, align-self...）。
- 各屬性搭配的值也都有一套語感與預設行為，熟悉這些邏輯後就能彈性排版。
- 本筆記也整理了 Figma Auto Layout 的對應語法，方便設計稿轉換成實作。

只要掌握主軸方向、對齊方式、空間分配，再加上幾個尺寸控制語法，  
你就能讓一整排元素排得整齊、漂亮、有彈性。

Flex 不是背語法，而是建立一種「排列思維」。