LESSON-07｜CSS 基礎：Flexbox

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

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

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

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

先備知識與操作環境

本堂先備：品牌樣式已完成，但導覽與服務摘要仍像垂直清單，需要在不同寬度下保持可用排列。需要的檔案是 header、nav、.service-list、.site-header 與 style.css。若尚未理解這些位置，先開啟 README 的最小實驗，再開始階段練習。

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

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

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

開啟本堂最小實驗

入口：開啟 examples/minimal.html。
操作：開啟 examples/minimal.html，先記下卡片尺寸，再用 DevTools Styles 暫時修改一條規則。
預期：畫面外觀或盒模型出現可預測改變，Computed 能看到最後值。
重設：重新整理頁面，DevTools 的暫時修改會清除。

學生練習流程

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

1
最小實驗

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

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

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

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

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

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

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

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

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

header頁首區塊：承載品牌名稱與主要導覽。
nav導覽區塊：提供訪客前往不同頁面的路徑。
.service-list服務清單 class：控制多筆服務項目的排列方式。
.site-header 與 style.css頁首與共用樣式：連結品牌導覽和全站視覺規則。

先學會這些詞

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

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

selectorselector 白話意思：先選出要修改的元素。展開查看正式定義、範例與驗收證據

正式定義: CSS 規則中用來匹配文件元素的模式。
什麼時候用: 要讓某一類卡片、按鈕或標題套用規則時。
最小範例: .service-card 會選中所有有這個 class 的元素。
可觀察證據: Elements 的 Styles 顯示規則命中哪些元素。
容易混淆: 和 property 混淆；selector 決定對誰改，property 決定改什麼。

propertyproperty 白話意思：指出要改變的外觀項目。展開查看正式定義、範例與驗收證據

正式定義: CSS 宣告中描述可設定樣式特性的名稱。
什麼時候用: 要調整顏色、寬度、間距或排列時。
最小範例: color: #17324d 中 color 是 property。
可觀察證據: Styles 面板左側的 property 名稱。
容易混淆: 和 value 混淆；value 是 property 的具體設定值。

valuevalue 白話意思：是 property 實際採用的值。展開查看正式定義、範例與驗收證據

正式定義: CSS 宣告中賦予 property 的資料與單位。
什麼時候用: 需要指定尺寸、色碼、方向或顯示方式時。
最小範例: padding: 1rem 中 1rem 是 value。
可觀察證據: Computed 面板顯示計算後的實際值。
容易混淆: 和 property 混淆；padding 是名稱，1rem 是值。

cascadecascade 白話意思：多條規則同時命中時，瀏覽器決定誰生效的規則。展開查看正式定義、範例與驗收證據

正式定義: 依來源、重要性、specificity 與宣告順序解決 CSS 衝突的機制。
什麼時候用: 樣式看似寫了卻被另一條規則蓋掉時。
最小範例: 較後面的 .button 規則可能覆蓋前面的同名 color。
可觀察證據: Styles 中被劃掉的宣告與 Computed 最終值。
容易混淆: 和 JavaScript 的事件冒泡混淆；cascade 是 CSS 規則取捨。

CSS custom propertyCSS custom property 白話意思：把品牌色或共用尺寸先取一個名字。展開查看正式定義、範例與驗收證據

正式定義: 以 --name 宣告並用 var() 取用的 CSS 自訂屬性。
什麼時候用: 多頁面共用品牌色、間距或主題設定時。
最小範例: :root { --brand: #176b87 }，元件使用 color: var(--brand)。
可觀察證據: 修改一個變數後多個元件同步變色。
容易混淆: 和 JavaScript 變數混淆；CSS 變數在樣式計算中使用。

box modelbox model 白話意思：每個元素都像由內容、內距、邊框、外距組成的盒子。展開查看正式定義、範例與驗收證據

正式定義: 瀏覽器計算元素尺寸與周邊空間的模型。
什麼時候用: 卡片大小、間距、水平捲軸或版面溢位出現時。
最小範例: box-sizing: border-box 讓 width 包含 padding 和 border。
可觀察證據: DevTools Box Model 圖示與 computed width。
容易混淆: 和 Flexbox 混淆；box model 算單一盒子，Flexbox 排多個盒子。

FlexboxFlexible Box Layout 白話意思：一維排列工具，處理一列或一欄的對齊。展開查看正式定義、範例與驗收證據

正式定義: 以 flex container 的主軸與交叉軸排列子元素的 CSS layout model。
什麼時候用: 導覽列、按鈕列、卡片列或需要對齊時。
最小範例: display: flex; gap: 1rem; align-items: center;。
可觀察證據: Computed 的 display、主軸排列與 390px 是否換行。
容易混淆: 和 Grid 混淆；Flexbox 適合一維，Grid 適合二維區塊。

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

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

.service-card {
  box-sizing: border-box;
  padding: 1rem;
  border: 1px solid #cbd8e4;
  color: #17324d;
}
.service-list { display: flex; gap: 1rem; flex-wrap: wrap; }

Live Lab：逐段讀碼與驗證

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

Step 1
找出命中的元素

目的
從 selector、property、value 三個詞開始讀 CSS。

修改位置
style.css、index.html
替 brand 與 service-card 寫 class 規則

預期結果
Styles 能看到正確命中。本堂焦點是「用 Flexbox 排列導覽列、頁首與服務卡片」。

驗收證據
Styles 面板

卡住先查
只檢查一件事：style.css、index.html 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 2
比較規則優先度

目的
用兩條同樣 selector 的規則觀察 cascade。

修改位置
style.css
新增後寫的顏色，再移動宣告順序

預期結果
Computed 只留下預期顏色。本堂焦點是「用 Flexbox 排列導覽列、頁首與服務卡片」。

驗收證據
Styles 被劃掉規則

卡住先查
只檢查一件事：style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 3
建立盒子尺寸

目的
讓卡片有可讀內距與邊框，讀懂 Box Model。

修改位置
index.html、style.css
加入 box-sizing、padding、border

預期結果
卡片不貼邊且寬度可預測。本堂焦點是「用 Flexbox 排列導覽列、頁首與服務卡片」。

驗收證據
Box Model

卡住先查
只檢查一件事：index.html、style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 4
排列內容

目的
依本堂版面目標調整 Flexbox 或首頁區塊。

修改位置
style.css
修改 display、gap、對齊或容器寬度

預期結果
卡片與 CTA 有一致排列。本堂焦點是「用 Flexbox 排列導覽列、頁首與服務卡片」。

驗收證據
Computed 與畫面

卡住先查
只檢查一件事：style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 5
驗收窄版

目的
用 390px 找出尺寸或文字造成的溢位。

修改位置
DevTools viewport、style.css
切換窄版並修正一個超出元素

預期結果
水平捲軸消失，文字仍可讀。本堂焦點是「用 Flexbox 排列導覽列、頁首與服務卡片」。

驗收證據
390px 與 Box Model

卡住先查
只檢查一件事：DevTools viewport、style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。
Step 6
完成品牌變體

目的
保留 CSS 責任，只替換商家內容或變數。

修改位置
index.html、style.css
替另一服務型商家完成一張卡片或品牌色變體

預期結果
不新增未教技術也能呈現一致介面。本堂焦點是「用 Flexbox 排列導覽列、頁首與服務卡片」。

驗收證據
桌機／手機對照

卡住先查
只檢查一件事：index.html、style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。

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

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

互動問答

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

Q1概念理解「selector」在本堂要解決什麼問題？本題線索：selector；回到名詞卡與 Elements 的 Styles 顯示規則命中哪些元素。展開解析收合解析

白話解析：

先選出要修改的元素。正式來說，CSS 規則中用來匹配文件元素的模式。

對照位置：

回到名詞卡「selector」，再看 Elements 的 Styles 顯示規則命中哪些元素。

預期觀察：

你應該能用自己的話說出：要讓某一類卡片、按鈕或標題套用規則時。

常見錯誤：

不要只回答「它是selector」；那是重複名詞，不是說明責任。

立即驗證：

開啟 examples/minimal.html，依序做「開啟 examples/minimal.html，先記下卡片尺寸，再用 DevTools Styles 暫時修改一條規則。」並記下畫面或工具證據。

Q2程式碼閱讀修改指定規則後，你預測畫面會看到什麼？本題線索：style.css、index.html；要修改：替 brand 與 service-card 寫 class 規則；觀察：Styles 面板展開解析收合解析

白話解析：

先看檔案責任，再預測結果。這一步的目的：從 selector、property、value 三個詞開始讀 CSS。

對照位置：

對照 Live Lab Step 1，位置是 style.css、index.html；範例內容：.service-card { box-sizing: border-box; padding: 1rem; border: 1px solid #cbd8e4; color: #17324d; } .service-list { display: flex; gap: 1rem; flex-wrap: wrap; }

預期觀察：

Styles 能看到正確命中。本堂焦點是「用 Flexbox 排列導覽列、頁首與服務卡片」。

常見錯誤：

如果只改了檔案但沒有結果，先不要重寫全部；只檢查一件事：style.css、index.html 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。

立即驗證：

實際操作後檢查 Styles 面板。

Q3概念比較「selector」和「property」在本堂的責任有什麼不同？本題線索：比較 selector 與 property；操作位置：style.css 展開解析收合解析

白話解析：

selector：先選出要修改的元素。；property：指出要改變的外觀項目。

對照位置：

對照兩張名詞卡的正式定義：CSS 規則中用來匹配文件元素的模式。／CSS 宣告中描述可設定樣式特性的名稱。

預期觀察：

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

常見錯誤：

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

立即驗證：

在 style.css 做「新增後寫的顏色，再移動宣告順序」，再用 Styles 被劃掉規則比較前後差異。

Q4除錯驗收如果完成操作後結果不對，你會先從哪一個證據開始查？本題線索：index.html、style.css；第一個檢查位置：桌機／手機對照展開解析收合解析

白話解析：

先描述症狀，再提出一個最小假設。本堂常見錯誤是：每個元素另寫一套規則

對照位置：

對照最後一段 Live Lab：index.html、style.css；檢查方式：只檢查一件事：index.html、style.css 是否存在、檔名是否完全一致，以及瀏覽器目前是否開啟這個入口。

預期觀察：

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

常見錯誤：

不要先清快取、重裝工具或複製 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 與窄版畫面留下了什麼證據？

CSS 基礎：Flexbox

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

先備知識與操作環境

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

學生練習流程

最小實驗

Step 2

最小實驗 2

Starter

Checkpoint

Solution

變體驗收

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

先學會這些詞

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

Live Lab：逐段讀碼與驗證

找出命中的元素

比較規則優先度

建立盒子尺寸

排列內容

驗收窄版

完成品牌變體

互動問答

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

白話解析：

對照位置：

預期觀察：

常見錯誤：

立即驗證：

常見誤解

本堂任務與驗收

學生自問

官方延伸閱讀