Solution 要做什麼
對照完整答案、責任邊界與原因。
本主題檔案：files/style.css
定位：先在 Computed 讀 flex-direction，不先猜 justify-content 是水平或垂直。
Solution · code-edit
flex-direction 與主／交叉軸
對照完整答案、責任邊界與原因。
本階段驗收
頁面不會替你修改檔案；請在實作檔完成後重新整理確認。
目前要處理
container 為 display:flex、flex-direction:row，三個 item 沿主軸橫排。
預期看到
runtime 的 flex-direction 由 row 變 column；學生能指出主軸由 inline 方向改為 block 方向，justify/align 的責任隨軸改變。
.service-list{display:flex;flex-direction:row;justify-content:space-between;align-items:center}檔案清單
只在本階段資料夾內操作，避免改到其他章節。
index.html
P0 專章可執行入口。style.css
P0 專章樣式與狀態證據。
證據：runtime before=row、after=column、property=flex-direction；畫面 item rect 由橫向分布改成縱向堆疊
回到主題說明