最小可執行實驗

CSS Flexbox：先預測，再修改

這頁刻意從沒有 Flexbox 的狀態開始。請用 DevTools 暫時加入 CSS，觀察每次只改一個 property 的結果。

三張服務卡

網站健檢

先找出結構與版面問題。

效能優化

讓訪客更快看到內容。

安全維護

定期檢查更新與備份。

操作步驟與預期結果

右鍵選取三張服務卡的父層，開啟 DevTools 的 Elements／Styles。
在 .service-list 暫時加入 display: flex;；預期三張卡變成一列。
再加入 gap: 1rem;；預期卡片之間出現一致間距。
把 viewport 調成 390px；先觀察沒有 flex-wrap 時的溢位。
最後加入 flex-wrap: wrap;；預期卡片分成多列，頁面不再水平溢位。
重新整理頁面即可重設 DevTools 的暫時修改。

驗收證據：Computed 顯示三個 property 的最後值；390px 下可以看到卡片換行。

本實驗不使用 JavaScript；Flexbox 是 CSS 的版面工具。