讓導覽連結橫向排列
修改檔案：style.css
完成後看見：三個導覽連結排成同一列
第 05 章交棒
Hero 已經可讀，現在把入口排成導覽隊伍
上一章已完成背景、文字與 CTA 的可讀性；本章只新增共同父層、主軸與間距，讓入口與介紹內容站成清楚的隊伍。
ABOUT ME
我把想法整理成容易使用的畫面
目前練習 HTML 與 CSS，並持續把每堂成果合回作品集。
作品
這裡會整理已完成的網站作品。
聯絡
聯絡方式將在後續章節補上。
CHAPTER 06 · PRACTICE WORKSPACE
Flex 入門：導覽列與左右兩欄
完成橫向導覽列與左右排列介紹區
01
Starter
0/3
- 01Starter讀懂作品骨架
- 02Checkpoint 1加入第一項能力
- 03Checkpoint 2累積第二項能力
- 04Solution核對完整結果
TASK STATUS
三項任務目前狀態
分開品牌與選單
修改檔案：style.css
完成後看見：品牌靠左、選單靠右
建立介紹區左右兩欄
修改檔案：style.css
完成後看見：圖像與文字並排且有間距
WORKSPACE
本階段實作區
先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。
FOCUS TASK · TASK-01
現在只處理：讓導覽連結橫向排列
講解時展開：2 個小型比較
flex-direction vs flex-wrap｜一列與換行
比較：flex-direction 決定主軸方向，flex-wrap 決定空間不足時是否換行；不是同一件事。
現在做：在 DevTools 先對 .practice-nav__links 暫時加入 display: flex，切換 flex-direction: row 與 column，觀察三個連結的主軸方向；再在窄視窗切換 flex-wrap: nowrap 與 wrap，記錄是否換行，最後移除實驗值並把標準 display: flex 寫回 style.css。
看預期與證據
預期：能用兩組前後畫面分辨 flex-direction 改變主軸方向、flex-wrap 只處理空間不足時是否換行，並知道本任務最後需要的是橫向 Flex。
證據：連續截圖或口述同時指出 row／column 與 nowrap／wrap 的差異，並展示最後 .practice-nav__links 的 display: flex。
父層 vs 子項目｜Flex 規則放哪裡
比較：排列規則通常由共同父層管理，單一連結不應獨自承擔整列布局。
現在做：先在 DevTools 暫時停用 .practice-nav__links 的 display: flex，觀察連結回到直排；再只對單一 .practice-nav__links a 加 display: flex，確認它只能改變自己的內容盒，不能排列兄弟連結；最後把規則恢復到共同父層 .practice-nav__links。
看預期與證據
預期：能用兩次對照指出單一連結只能管理自己的盒子，三個連結的共同排列必須由 .practice-nav__links 父層負責。
證據：前後截圖或口述標示父層與單一連結的 selector，並展示恢復後父層的 display: flex 宣告。
需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
- A｜觀察：在桌機寬度開啟 Starter，確認 .practice-nav__links 三個連結仍直向排列且上方帶預設間距。
- B｜預測：重新整理後查看導覽列，確認三個連結位於同一橫列。
- C｜實作：在 style.css 的 .practice-nav__links 完成「讓導覽連結橫向排列」，一次只處理本任務責任。
- D｜故障：若結果不一致，先依原操作重現，再檢查 .practice-nav__links 與 style.css，最後重跑原操作。
- E｜驗收：三個導覽連結排成同一列
完成條件：DONE-01：三個導覽連結排成同一列
CONTINUE
開始 TASK-01
前往 Checkpoint 1，依要求完成「讓導覽連結橫向排列」。