LESSON-07 · TOPIC 01
能由 flex-direction 判斷主軸方向，並正確解釋 justify-content 與 align-items 各控制哪一條軸。
能由 flex-direction 判斷主軸方向，並正確解釋 justify-content 與 align-items 各控制哪一條軸。
若把水平與垂直背成固定答案，direction 改為 column 後就會反向調錯 property。
要修改的檔案：files/starter/style.css
定位：先在 Computed 讀 flex-direction，不先猜 justify-content 是水平或垂直。｜依 starter-1 定位，只修改「flex-direction 與主／交叉軸」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
服務按鈕列在桌機橫排，窄版要改直排，但原本的置中規則方向跟著變了。
起始狀態：container 為 display:flex、flex-direction:row，三個 item 沿主軸橫排。
runtime 的 flex-direction 由 row 變 column；學生能指出主軸由 inline 方向改為 block 方向，justify/align 的責任隨軸改變。
驗收證據：runtime before=row、after=column、property=flex-direction；畫面 item rect 由橫向分布改成縱向堆疊
導覽、按鈕列、卡片列需要切換橫排／直排或調整兩軸對齊時。
常見混淆：row 不保證由左到右；文字方向與 writing mode 也會影響 main-start/main-end。
這段程式是理解起點，不是要你直接跳過 Starter。
主軸是物件排隊的方向；交叉軸就是跟它垂直的另一條方向。
正式說法：flex-direction establishes the flex container main axis；cross axis perpendicular to it。justify-content distributes free space along main axis，align-items aligns items along cross axis。
.service-list{display:flex;flex-direction:row;justify-content:space-between;align-items:center}每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/style.css 定位：先在 Computed 讀 flex-direction，不先猜 justify-content 是水平或垂直。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先在 Computed 讀 flex-direction，不先猜 justify-content 是水平或垂直。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先在 Computed 讀 flex-direction，不先猜 justify-content 是水平或垂直。。
檔案：files/starter/style.css 定位：先在 Computed 讀 flex-direction，不先猜 justify-content 是水平或垂直。
要做：執行實驗替 Flex container 切換 direction-column class，讀取 computed flex-direction。
預期：runtime 的 flex-direction 由 row 變 column；學生能指出主軸由 inline 方向改為 block 方向，justify/align 的責任隨軸改變。
證據：runtime before=row、after=column、property=flex-direction；畫面 item rect 由橫向分布改成縱向堆疊
卡住先查：先在 Computed 讀 flex-direction，不先猜 justify-content 是水平或垂直。
檔案：files/starter/style.css 定位：先在 Computed 讀 flex-direction，不先猜 justify-content 是水平或垂直。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 flex-direction 由 row 變 column；學生能指出主軸由 inline 方向改為 block 方向，justify/align 的責任隨軸改變。
證據：runtime before=row、after=column、property=flex-direction；畫面 item rect 由橫向分布改成縱向堆疊
卡住先查：先在 Computed 讀 flex-direction，不先猜 justify-content 是水平或垂直。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
先找物件排隊方向，那就是 main axis。
切成 column 後，justify-content 改管垂直主軸，align-items 改管水平交叉軸。
完整解答與原因：runtime 由 row 切到 column；flex-direction 重新定義主軸，因此 justify/align 的視覺方向也隨之交換。