Checkpoint · code-edit

flex-direction 與主/交叉軸

只驗證本主題責任,不偷渡其他答案。

Checkpoint 要做什麼

只驗證本主題責任,不偷渡其他答案。

本主題檔案:files/style.css

定位:先在 Computed 讀 flex-direction,不先猜 justify-content 是水平或垂直。

本階段驗收

頁面不會替你修改檔案;請在實作檔完成後重新整理確認。

目前要處理

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}

檔案清單

只在本階段資料夾內操作,避免改到其他章節。

證據:runtime before=row、after=column、property=flex-direction;畫面 item rect 由橫向分布改成縱向堆疊

前往 Solution →