找出容器與項目
先指出誰要排、它們共同父層是誰，再寫 display:flex。
CHAPTER 06 · 210 MINUTES
Flex 先找共同父層，再決定隊伍怎麼站
完成橫向導覽、品牌與選單左右分開，以及照片和文字並排的介紹區。
3個明確任務
2個接回點
2個 Flex 容器
LEARNING GOALS
本章結束時，你能做出什麼
控制站位與間距
使用 justify-content、align-items 和 gap，而非大量 margin。
完成兩種排列
導覽列與介紹區都能沿一條主軸清楚排列。
PROBLEM & ANALOGY
元素都在頁面上，為什麼仍全部上下堆疊？
Flex 像安排一排人：container 是帶隊者，items 是隊員；主軸決定隊伍方向，交叉軸決定同一排如何對齊。
本章要解決：導覽連結直向堆疊、品牌與選單沒有分居左右、照片與介紹文字無法並排。
接住上一章：Hero 內容已完成，這次安排舞台上的元素怎麼站位。
把名詞對回畫面與程式
- container
- 真正負責排列隊員的共同父層。
- items
- 被 container 排列的直接子元素。
- display:flex
- 啟動一維排列的開關，必須放在父層。
- justify-content
- 沿主軸分配 items 的位置。
- align-items / gap
- 前者控制交叉軸對齊，後者控制 items 間距。
SCOPE
今天的學習邊界
能自己完成
container/item、主軸/交叉軸、display:flex、justify-content、align-items 與 gap。
看得懂即可
flex-wrap 能在寬度不足時換行；完整 RWD 留到第 12 章。
刻意延後
Grid、order 與複雜 grow/shrink 計算。
CORE IDEAS
三個核心觀念
- Flex 寫在共同父層，不是寫在想移動的圖片或單一連結上。
- 先確認主軸方向，再判斷 justify-content 與 align-items 各自控制哪一軸。
-
gap負責項目共同間距；不要靠碰巧有效的大量 margin 推位置。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：把 flex 加在照片本身，觀察照片和文字仍然上下排列，證明選錯了容器。
- 圈出真正要排列的 items。
- 找到它們唯一的共同父層。
- 確認父層已有
display:flex。 - 確認方向與主軸，再看 justify、align、gap，最後才查寬度和 wrap。
連結仍然上下堆疊
先查：先確認 display:flex 寫在包含所有連結的父層。
品牌和選單沒有分開
先查：重新圈出兩組 items，確認父層寬度與 justify-content。
照片文字擠成一欄
先查：查父層方向、子項寬度與是否需要換行，再看 gap。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我已圈出要排成一隊的 items。
- 我能指出每組 items 的共同父層。
- 我先決定主軸方向，再使用 justify、align、gap。
- 我會用寬視窗與窄視窗各測一次。
讓導覽連結橫向排列
檔案：style.css
位置：.practice-nav__links
結果：三個導覽連結排成同一列
分開品牌與選單
檔案：style.css
位置：.practice-nav
結果：品牌靠左、選單靠右
建立介紹區左右兩欄
檔案：style.css
位置：.about-layout
結果：照片與文字並排且有間距
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
我把 display:flex 放在 ______；主軸是 ______，用 ______ 控制分布，用 ______ 控制間距。
Flex 先解決一維排列；窄畫面的完整斷點與手機導覽會在後續章節處理。
截圖橫向導覽與左右介紹區，並指出兩個 flex container 各自控制哪些 items。
30 分鐘空白版重建：開啟六區塊空白重建檔，依「圈 items → 找父層 → 畫主軸 → 加入 Flex 與 gap」重建指定排列；完成後才看目標排列，不可複製 checkpoint。
下一章：用 Grid 處理同時有列與欄的作品卡片牆。