正在準備工作環境...
Flexbox 基礎
Flexbox 讓區塊像橫向、縱向排隊的積木，排版變得更直覺。 理解主軸、交叉軸，就能輕鬆做導航列或按鈕群組。
水平導航列
垂直按鈕群組
交叉軸對齊
AI 協作：學了這個，跟 AI 怎麼配合？
Flexbox 是 AI 寫版面時最常用的技術。學會 Flexbox 的概念，你就能精確指導 AI 排版。
你的人類優勢：
- 你知道元素要「水平排」還是「垂直排」、要靠左還是置中
- 你能用白話告訴 AI 排版需求，不用死記 CSS 屬性名
可以這樣跟 AI 說：
這個導航列我要 logo 靠左、選單項目靠右、垂直置中對齊。幫我用 Flexbox 處理。
練習題
互動示範
DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩
挑戰任務
Task 1
把一組三個連結排成水平置中導航列，使用 display:flex 與 justify-content:center
Task 2
製作垂直排列的表單按鈕（送出、重設、預覽），使用 flex-direction:column 並設定 12px 間距
Task 3
建立卡片抬頭，左邊是文字，右邊是藍色小按鈕，讓文字與按鈕在交叉軸置中對齊
Next Lesson →