# 📘《刻板必備：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 不是背語法，而是建立一種「排列思維」。