LESSON-07 · solution
這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。
會用到的檔案：index.html、style.css
本堂焦點：用 Flexbox 排列導覽列、頁首與服務卡片
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：先對照差異，再檢查 在 style.css 的「.service-list axes」對照這項變更：.service-list { display:flex; flex-direction:row; align-items:stretch; gap:1rem; flex-wrap:wrap; }
貼上位置：style.css 的 .service-list axes 區塊
.service-list { display:flex; flex-direction:row; align-items:stretch; gap:1rem; flex-wrap:wrap; }預期結果：Computed 可讀到 display、direction、align 與 wrap。
驗收證據：Flex overlay、Computed 與 390px 畫面。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 style.css 的「.service-card flex」對照這項變更：.service-card { flex:1 1 15rem; }
貼上位置：style.css 的 .service-card flex 區塊
.service-card { flex:1 1 15rem; }預期結果：卡片可放大、縮小並換行。
驗收證據：Computed flex-grow、flex-shrink、flex-basis。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 style.css 的「min-width:0 and order」對照這項變更：.service-card { min-width:0; }
貼上位置：style.css 的 min-width:0 and order 區塊
.service-card { min-width:0; }預期結果：長文字不溢位，Tab 依 DOM 順序。
驗收證據：scrollWidth、Elements 與 Tab。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 style.css 的「flex-wrap」對照這項變更：.service-list { flex-wrap:wrap; }
貼上位置：style.css 的 flex-wrap 區塊
.service-list { flex-wrap:wrap; }預期結果：scrollWidth <= clientWidth。
驗收證據：Computed flex-wrap 與 390px 畫面。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.htmlP0 專章可執行入口。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>LESSON-07 solution</title><link rel="stylesheet" href="style.css"></head><body><header class="site-header"><a href="#main">Flex 工作室</a><nav aria-label="主要導覽"><a href="#services">服務</a><a href="#contact">聯絡</a></nav></header><main id="main"><h1>Flexbox 主軸與交叉軸</h1><section id="services" class="service-list"><article class="service-card"><h2>網站規劃</h2><p>很長的服務名稱用來測試 min-width: 0 與縮放。</p></article><article class="service-card"><h2>內容整理</h2><p>保留 DOM 與鍵盤順序。</p></article><article class="service-card"><h2>窄版測試</h2><p>使用第三張卡片觀察換行。</p></article></section><p id="status" role="status">請在 Computed 檢查 Flex 屬性。</p></main><footer id="contact">聯絡：<a href="mailto:hello@example.com">hello@example.com</a></footer></body></html>style.cssP0 專章樣式與狀態證據。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif;line-height:1.7;color:#17324d;background:#eef5f8}body>main,body>header,body>footer,main{width:min(100% - 2rem,760px);margin:1rem auto;padding:1rem}a{color:#155e75}button,input,textarea{font:inherit}button{padding:.65rem .9rem}input,textarea{display:block;width:100%;padding:.6rem}@media(max-width:390px){body>main,body>header,body>footer,main{width:min(100% - 1rem,760px)}}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.site-header nav{display:flex;gap:1rem}.service-card{flex-shrink:0;flex-basis:15rem;min-width:0;padding:1rem;border:1px solid #9bb8c8}a:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}
.service-list { display: flex; gap: 1rem; flex-wrap: wrap; }Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。
開啟 examples/supplement/index.html；自學檔案不混入 Solution files。