Flexbox 常見排版

Flexbox 擅長「一字排開」與「兩端對齊」，常見在導覽列、卡片列表與置底頁腳。 掌握主軸空間分配，就能快速做出常用版型。

Navbar：左右分佈

卡片橫向排列 + 自動換行

Footer 置底

AI 協作：學了這個，跟 AI 怎麼配合？

常見排版模式（卡片列、導航列、聖杯排版）AI 都會寫，但你要能「點菜」。

你的人類優勢：

• 你能描述你在別的網站看到的排版效果，讓 AI 複製
• 你能判斷 AI 的排版在不同內容量下是否還能撐住

可以這樣跟 AI 說：

幫我做一個跟 Shopee 商品頁類似的排版：左邊大圖、右邊商品資訊（名稱、價格、按鈕）。用 Flexbox。

練習題