Skip to content

建立 2026-09-15 更新 2026-09-15

Flex 與 Grid

大多數網站區塊不是「一欄文字」就是「橫列裡幾個項目」。Tailwind 把 CSS 的 Flexbox 與 Grid 收成短 class：先決定用哪一種，再加對齊與間距。

Flex：一列或一直欄

<header class="flex items-center justify-between gap-4">
  <a class="font-semibold">Logo</a>
  <nav class="flex gap-6">
    <a>文件</a>
    <a>價格</a>
  </nav>
</header>
class 意思
flex display: flex
flex-col 主軸改垂直
items-center 交叉軸置中（列排時就是垂直置中）
justify-between 主軸兩端對齊
justify-center 主軸置中
flex-1 吃掉剩餘空間
gap-4 子項間距（比對每個子項設 margin 清楚）

導覽列、按鈕列、圖文並排，優先用 Flex。需要「自動換行的卡片牆」再改 Grid。

Grid：多欄版面

<ul class="grid grid-cols-1 gap-6 md:grid-cols-3">
  <li class="rounded-xl border p-6">卡片</li>
  <li class="rounded-xl border p-6">卡片</li>
  <li class="rounded-xl border p-6">卡片</li>
</ul>

手機一欄、中等寬度三欄，靠 grid-cols-1 加 md:grid-cols-3 即可，不必自己寫 media query。欄與欄之間用 gap-6，不要靠 padding 硬撐。

需要某張卡片跨兩欄時用 md:col-span-2。v4 對欄數不再卡在 12，grid-cols-16 這類值可以直接用。

建議先看的影片

官方系列第三集 Responsive Design 會把 Flex／寬度與斷點一起示範，適合看完本頁再對畫面。

相關資料