Starter 要做什麼
先看見缺口，再完成一個小修改。
本主題檔案：files/style.css
定位：先拖曳預覽並記下第一個連結換行或互相擠壓的寬度。
Starter · code-edit
內容驅動 breakpoint
先看見缺口，再完成一個小修改。
本階段驗收
頁面不會替你修改檔案；請在實作檔完成後重新整理確認。
目前要處理
導覽為 display:flex、flex-wrap:nowrap，四個連結保留真實長文字。
預期看到
runtime 的 flex-wrap 由 nowrap 變 wrap；後續 viewport probe 能量得第一個 item rect 重疊／換行點與 media query match。
.site-nav{display:flex;flex-wrap:nowrap}@media(max-width:44rem){.site-nav{flex-wrap:wrap}}檔案清單
只在本階段資料夾內操作，避免改到其他章節。
index.html
入口 HTML：提供六張服務卡、聯絡區塊、表單欄位與選用的測量按鈕。style.css
CSS 樣式：控制流動容器、Grid 欄位、breakpoint、focus 與 checkpoint 缺口。main.js
選用測量工具：讀取 viewport、scrollWidth、clientWidth 與 computed 欄位，不輸出硬編碼通過訊息。
證據：現有 runtime before=nowrap、after=wrap、property=flex-wrap；完整證據需 firstWrapWidth、itemRects 與 mediaMatches
前往 Checkpoint →