LESSON-07｜用 Flexbox 排列導覽列、頁首與服務卡片

先理解：這堂課解決什麼問題？

品牌樣式已完成，但導覽與服務摘要仍像垂直清單，需要在不同寬度下保持可用排列。

本堂要完成：完成頁首導覽與服務卡片的 Flexbox 排列，窄版可以換行而不互相遮住。

學習邊界：先完成「用 Flexbox 排列導覽列、頁首與服務卡片」，不提前引入尚未教過的框架或建置工具。

先備知識與操作環境

本章專用教材只使用既定技術邊界。先開啟 examples/minimal.html，再依 Starter→Checkpoint→Solution 留下 Computed display:flex、主軸排列、gap、換行與 390px 截圖證據。名詞驗收：flex container、flex item、main axis、cross axis、justify-content、align-items、gap、flex-wrap、Computed。

檔案位置：先找到 header、nav、.service-list、.site-header 與 style.css，再從本頁的最小實驗開始。
瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。

先做最小實驗：先看見結果

這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。

開啟本堂最小實驗

入口：開啟 examples/minimal.html。
操作：開啟專章最小範例，以 Tab 完成一次操作，並比對畫面、Elements、Console 與 390px。
預期：畫面只呈現 flex-direction 與主／交叉軸、flex-grow、shrink、basis、min-width: 0 解決長內容、order 與鍵盤順序風險的本章責任，不出現跨章模板。
重設：重新整理 examples/minimal.html，不寫入正式資料也不執行正式部署。

第一個檢查位置：先確認 URL 是 examples/minimal.html，再查看 Console 第一個錯誤。
成功證據：畫面只呈現 flex-direction 與主／交叉軸、flex-grow、shrink、basis、min-width: 0 解決長內容、order 與鍵盤順序風險的本章責任，不出現跨章模板。若不同，先檢查：先確認 URL 是 examples/minimal.html，再查看 Console 第一個錯誤。

學生練習流程

依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。

1
最小實驗

先閱讀本頁的問題、檔案地圖、名詞卡與最小例子。
2
Step 2

自己回答互動問答 4 題，再展開解析。
3
最小實驗 2

開啟最小實驗，實際操作一次並記下證據。
4
Starter

把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。
5
Checkpoint

前往 Checkpoint，只處理 1 個本堂核心缺口；先預測，再用指定證據驗收。
6
Solution

前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。
7
變體驗收

完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：首頁整合：下一堂會將導覽、hero、服務摘要與 CTA 組成完整首頁。

檔案地圖：每個位置負責什麼？

先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。

examples/minimal.html專章檔案：負責用 Flexbox 排列導覽列、頁首與服務卡片的可執行結果。
starter/files/index.html專章檔案：負責用 Flexbox 排列導覽列、頁首與服務卡片的可執行結果。
starter/files/style.css專章檔案：負責用 Flexbox 排列導覽列、頁首與服務卡片的可執行結果。

先學會這些詞

先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。

本堂 6 個詞先選一組，再展開需要的名詞卡；每次只保留目前的學習焦點。

flex-direction 與主／交叉軸flex-direction 與主／交叉軸 白話意思：用來理解「flex-direction 與主／交叉軸」的實務概念。展開查看正式定義、範例與驗收證據

正式定義: 本章將 flex-direction 與主／交叉軸定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用: 實作 flex-direction 與主／交叉軸或排查相關問題時。
最小範例: flex-direction 與主／交叉軸
可觀察證據: 能在專章範例指出 flex-direction 與主／交叉軸的操作結果。
容易混淆: 只記名稱卻沒有實際操作或驗收證據。

flex-grow、shrink、basisflex-grow、shrink、basis 白話意思：用來理解「flex-grow、shrink、basis」的實務概念。展開查看正式定義、範例與驗收證據

正式定義: 本章將 flex-grow、shrink、basis 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用: 實作 flex-grow、shrink、basis 或排查相關問題時。
最小範例: flex-grow、shrink、basis
可觀察證據: 能在專章範例指出 flex-grow、shrink、basis 的操作結果。
容易混淆: 只記名稱卻沒有實際操作或驗收證據。

min-width: 0 解決長內容min-width: 0 解決長內容 白話意思：用來理解「min-width: 0 解決長內容」的實務概念。展開查看正式定義、範例與驗收證據

正式定義: 本章將 min-width: 0 解決長內容定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用: 實作 min-width: 0 解決長內容或排查相關問題時。
最小範例: min-width: 0 解決長內容
可觀察證據: 能在專章範例指出 min-width: 0 解決長內容的操作結果。
容易混淆: 只記名稱卻沒有實際操作或驗收證據。

order 與鍵盤順序風險order 與鍵盤順序風險 白話意思：用來理解「order 與鍵盤順序風險」的實務概念。展開查看正式定義、範例與驗收證據

正式定義: 本章將 order 與鍵盤順序風險定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用: 實作 order 與鍵盤順序風險或排查相關問題時。
最小範例: order 與鍵盤順序風險
可觀察證據: 能在專章範例指出 order 與鍵盤順序風險的操作結果。
容易混淆: 只記名稱卻沒有實際操作或驗收證據。

可觀察證據可觀察證據 白話意思：用來理解「可觀察證據」的實務概念。展開查看正式定義、範例與驗收證據

正式定義: 本章將可觀察證據定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用: 實作可觀察證據或排查相關問題時。
最小範例: 可觀察證據
可觀察證據: 能在專章範例指出可觀察證據的操作結果。
容易混淆: 只記名稱卻沒有實際操作或驗收證據。

單一變因除錯單一變因除錯 白話意思：用來理解「單一變因除錯」的實務概念。展開查看正式定義、範例與驗收證據

正式定義: 本章將單一變因除錯定義為可在檔案、畫面或 DevTools 中驗證的技術責任。
什麼時候用: 實作單一變因除錯或排查相關問題時。
最小範例: 單一變因除錯
可觀察證據: 能在專章範例指出單一變因除錯的操作結果。
容易混淆: 只記名稱卻沒有實際操作或驗收證據。

最小例子：先看懂，再複製

這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。

.service-list { display:flex; flex-direction:row; align-items:stretch; gap:1rem; flex-wrap:wrap; }

Live Lab：逐段讀碼與驗證

每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。

Step 1
建立 flex-direction、主軸、交叉軸與換行

目的
從 Flex container 控制一維排列。

修改位置
style.css
建立 flex-direction、主軸、交叉軸與換行

預期結果
Computed 可讀到 display、direction、align 與 wrap。

驗收證據
Flex overlay、Computed 與 390px 畫面。

卡住先查
只檢查目前指定的檔案與區塊。
Step 2
拆解 grow、shrink、basis

目的
理解卡片如何分配剩餘空間。

修改位置
style.css
拆解 grow、shrink、basis

預期結果
卡片可放大、縮小並換行。

驗收證據
Computed flex-grow、flex-shrink、flex-basis。

卡住先查
只檢查目前指定的檔案與區塊。
Step 3
允許長內容縮小並保留 DOM 鍵盤順序

目的
不以視覺 order 破壞操作順序。

修改位置
style.css
允許長內容縮小並保留 DOM 鍵盤順序

預期結果
長文字不溢位，Tab 依 DOM 順序。

驗收證據
scrollWidth、Elements 與 Tab。

卡住先查
只檢查目前指定的檔案與區塊。
Step 4
修正窄版無法換行

目的
排除 390px 水平溢位。

修改位置
style.css
修正窄版無法換行

預期結果
scrollWidth <= clientWidth。

驗收證據
Computed flex-wrap 與 390px 畫面。

卡住先查
只檢查目前指定的檔案與區塊。
Step 5
專章驗收：flex-direction 與主／交叉軸

目的
將概念轉成可重現的實作證據。

修改位置
examples/minimal.html 與對應 stage files
操作 flex-direction 與主／交叉軸並記錄結果。

預期結果
能展示 flex-direction 與主／交叉軸的畫面、DOM、Console 或 Network 證據。

驗收證據
檔案位置、操作、預期、實際與重新驗證。

卡住先查
只重做一個最小操作並查看第一個錯誤。
Step 6
專章驗收：flex-grow、shrink、basis

目的
將概念轉成可重現的實作證據。

修改位置
examples/minimal.html 與對應 stage files
操作 flex-grow、shrink、basis 並記錄結果。

預期結果
能展示 flex-grow、shrink、basis 的畫面、DOM、Console 或 Network 證據。

驗收證據
檔案位置、操作、預期、實際與重新驗證。

卡住先查
只重做一個最小操作並查看第一個錯誤。

操作層級Live Lab 段落導覽：切換六個實驗步驟

讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。

互動問答

先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。

Q1概念理解「flex-direction 與主／交叉軸」在本堂要解決什麼問題？本題線索：flex-direction 與主／交叉軸；回到名詞卡與能在專章範例指出 flex-direction 與主／交叉軸的操作結果。展開解析收合解析

白話解析：

用來理解「flex-direction 與主／交叉軸」的實務概念。正式來說，本章將 flex-direction 與主／交叉軸定義為可在檔案、畫面或 DevTools 中驗證的技術責任。

對照位置：

回到名詞卡「flex-direction 與主／交叉軸」，再看能在專章範例指出 flex-direction 與主／交叉軸的操作結果。

預期觀察：

你應該能用自己的話說出：實作 flex-direction 與主／交叉軸或排查相關問題時。

常見錯誤：

不要只回答「它是flex-direction 與主／交叉軸」；那是重複名詞，不是說明責任。

立即驗證：

開啟 examples/minimal.html，依序做「開啟專章最小範例，以 Tab 完成一次操作，並比對畫面、Elements、Console 與 390px。」並記下畫面或工具證據。

Q2程式碼閱讀修改指定規則後，你預測畫面會看到什麼？本題線索：style.css；要修改：建立 flex-direction、主軸、交叉軸與換行；觀察：Flex overlay、Computed 與 390px 畫面。展開解析收合解析

白話解析：

先看檔案責任，再預測結果。這一步的目的：從 Flex container 控制一維排列。

對照位置：

對照 Live Lab Step 1，位置是 style.css；範例內容：.service-list { display:flex; flex-direction:row; align-items:stretch; gap:1rem; flex-wrap:wrap; }

預期觀察：

Computed 可讀到 display、direction、align 與 wrap。

常見錯誤：

如果只改了檔案但沒有結果，先不要重寫全部；只檢查目前指定的檔案與區塊。

立即驗證：

實際操作後檢查 Flex overlay、Computed 與 390px 畫面。。

Q3概念比較「flex-direction 與主／交叉軸」和「flex-grow、shrink、basis」在本堂的責任有什麼不同？本題線索：比較 flex-direction 與主／交叉軸與 flex-grow、shrink、basis；操作位置：style.css 展開解析收合解析

白話解析：

flex-direction 與主／交叉軸：用來理解「flex-direction 與主／交叉軸」的實務概念。；flex-grow、shrink、basis：用來理解「flex-grow、shrink、basis」的實務概念。

對照位置：

對照兩張名詞卡的正式定義：本章將 flex-direction 與主／交叉軸定義為可在檔案、畫面或 DevTools 中驗證的技術責任。／本章將 flex-grow、shrink、basis 定義為可在檔案、畫面或 DevTools 中驗證的技術責任。

預期觀察：

你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。

常見錯誤：

不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。

立即驗證：

在 style.css 做「拆解 grow、shrink、basis」，再用 Computed flex-grow、flex-shrink、flex-basis。比較前後差異。

Q4除錯驗收如果完成操作後結果不對，你會先從哪一個證據開始查？本題線索：examples/minimal.html 與對應 stage files；第一個檢查位置：檔案位置、操作、預期、實際與重新驗證。展開解析收合解析

白話解析：

先描述症狀，再提出一個最小假設。本堂常見錯誤是：只口頭說明完成。

對照位置：

對照最後一段 Live Lab：examples/minimal.html 與對應 stage files；檢查方式：只重做一個最小操作並查看第一個錯誤。

預期觀察：

你要能指出一個具體位置，而不是一次修改很多檔案。

常見錯誤：

不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。

立即驗證：

重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。

常見誤解

看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
本堂只使用既定的 HTML、CSS、JavaScript、Vue CDN、Apps Script mock 與 Cloudflare Pages 驗收範圍。

本堂任務與驗收

完成頁首導覽與服務卡片的 Flexbox 排列，窄版可以換行而不互相遮住。

能用 Computed display:flex 留下可重現證據。
能用主軸排列留下可重現證據。
能用 gap 留下可重現證據。
能用換行與 390px 截圖留下可重現證據。
Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
遇到問題時能先寫出症狀，再檢查一個最小假設。

學生自問

誰是 flex container？誰是 flex item？
主軸與交叉軸目前分別是哪個方向？
我要用 justify-content、align-items 還是 gap 解決目前問題？
我用 Elements、Computed 與窄版畫面留下了什麼證據？

官方延伸閱讀

正式延伸｜自主學習

把「Flexbox 軸線、縮放與順序」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。

開啟自主學習入口｜4 個獨立 topic

你會怎麼做

先選一個 topic，讀懂成果、檔案與定位。
在自己的 Starter 檔案修改一小段。
重新載入，用畫面、Elements、Computed、Console 或文件留下證據。

建議第一個 topic：flex-direction 與主／交叉軸。

Learning map

flex-direction 與主／交叉軸｜code-edit｜files/starter/style.css｜runtime before=row、after=column、property=flex-direction；畫面 item rect 由橫向分布改成縱向堆疊
flex-grow、shrink、basis｜code-edit｜files/starter/style.css｜runtime before 包含 0 1 auto；after 包含 1 0 與 192px；property=flex
min-width: 0 解決長內容｜code-edit｜files/starter/style.css｜runtime before=auto、after=0px、property=min-width；人工證據為 item 與頁面 scrollWidth<=clientWidth
order 與鍵盤順序風險｜code-edit｜files/starter/style.css｜runtime focused=true、activeId=order-link-a；人工證據保存視覺序列與三步 document.activeElement 序列

用 Flexbox 排列導覽列、頁首與服務卡片

先理解：這堂課解決什麼問題？

先備知識與操作環境

先做最小實驗：先看見結果

學生練習流程

最小實驗

Step 2

最小實驗 2

Starter

Checkpoint

Solution

變體驗收

檔案地圖：每個位置負責什麼？

先學會這些詞

最小例子：先看懂，再複製

Live Lab：逐段讀碼與驗證

建立 flex-direction、主軸、交叉軸與換行

拆解 grow、shrink、basis

允許長內容縮小並保留 DOM 鍵盤順序

修正窄版無法換行

專章驗收：flex-direction 與主／交叉軸

專章驗收：flex-grow、shrink、basis

互動問答

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

常見誤解

本堂任務與驗收

學生自問

官方延伸閱讀

正式延伸｜自主學習

Learning map