Flexbox 与 Grid 布局

布局是前端的核心日常。Tailwind 把 CSS 的两大布局系统——Flexbox(一维布局)和 Grid(二维布局)——封装成简洁的工具类,让你不写一行 CSS 规则就能完成复杂布局。本篇详解最常用的套路。

1. flex 容器的基础

给父元素加 flex,它就变成 flex 容器,子元素自动横向排列:

<!-- 启用 flex 容器 -->
<div class="flex">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>
<!-- 三个子元素默认横向排列,高度自动撑满容器 -->

<!-- 改成纵向排列 -->
<div class="flex flex-col">
  <div>A</div>
  <div>B</div>
</div>

<!-- flex-row 是默认值;flex-row-reverse / flex-col-reverse 反向 -->

2. 主轴 / 交叉轴对齐

flex 布局的核心是两根轴:主轴(默认横向)用 justify-* 控制,交叉轴(默认纵向)用 items-* 控制。把这两个系列组合起来,可以表达几乎所有对齐方式:

<!-- 主轴对齐(横向布局时主轴是 X 轴):justify-* -->
<div class="flex justify-start">     <!-- 靠左(默认) -->
<div class="flex justify-center">    <!-- 居中 -->
<div class="flex justify-end">       <!-- 靠右 -->
<div class="flex justify-between">   <!-- 两端对齐,中间均分 -->
<div class="flex justify-around">    <!-- 每个元素左右间距相同 -->
<div class="flex justify-evenly">    <!-- 所有间隔完全相同 -->

<!-- 交叉轴对齐(横向布局时交叉轴是 Y 轴):items-* -->
<div class="flex items-start">       <!-- 顶对齐 -->
<div class="flex items-center">       <!-- 垂直居中 -->
<div class="flex items-end">         <!-- 底对齐 -->
<div class="flex items-stretch">     <!-- 拉伸到同高(默认) -->
<div class="flex items-baseline">    <!-- 文字基线对齐 -->

记忆要点:

3. 居中万能组合

整篇教程里最高频的写法:

<!-- 居中万能组合:水平+垂直居中 -->
<div class="flex items-center justify-center h-screen">
  <div>我完美居中</div>
</div>

<!-- 这是 Tailwind 里最常见的居中写法,
     99% 的场景都用这套 -->

flex items-center justify-center 是水平 + 垂直居中的标准答案。看到设计稿里"那个图标在那个圆里居中","那段文字在那张图上居中",基本都是这套。

4. flex-1 / flex-none:控制占比

子元素的增长 / 收缩行为,通过这几个类控制:

<!-- flex-1:占据剩余空间 -->
<div class="flex">
  <div class="w-20">固定宽</div>
  <div class="flex-1">占据剩余空间</div>
</div>

<!-- flex-none:不收缩不增长 -->
<div class="flex">
  <div class="flex-none w-24">永远 96px</div>
  <div class="flex-1">自适应</div>
</div>

<!-- flex-grow-0 / flex-grow-1:控制是否增长 -->
<!-- flex-shrink-0:禁止收缩(图片防变形常用) -->
<img class="flex-shrink-0 w-16 h-16" src="avatar.png" />

典型应用:顶部导航栏的"logo + 中间菜单 + 右侧按钮",中间菜单用 flex-1 占据剩余空间。

5. 换行:flex-wrap

默认 flex 不换行,子元素会被挤压。需要换行时:

<!-- 默认不换行,子元素会被挤压 -->
<div class="flex">
  <div class="w-32">A</div>
  <div class="w-32">B</div>
  <div class="w-32">C</div>
  <div class="w-32">D</div>
</div>

<!-- flex-wrap:超出自动换行 -->
<div class="flex flex-wrap gap-4">
  <div class="w-32">A</div>
  <div class="w-32">B</div>
  <div class="w-32">C</div>
  <div class="w-32">D</div>
</div>

6. gap:子元素间距

现代 CSS 的 gap 属性是 flex/grid 子元素间距的最佳方案——比给每个子元素加 margin 干净得多。Tailwind 提供 gap-* 系列,数值遵循同一套 4px 比例尺:

<!-- gap-* 控制子元素间距,远比 margin 优雅 -->
<div class="flex gap-4">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<!-- 行列不同间距 -->
<div class="grid gap-x-8 gap-y-4 grid-cols-3">
  <div>A</div><div>B</div><div>C</div>
  <div>D</div><div>E</div><div>F</div>
</div>

7. Grid:二维布局

Grid 适合"行 + 列"都复杂的二维布局。最常用的是 grid-cols-* 直接定义列数:

<!-- 固定列数 -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

<!-- 2 列 -->
<div class="grid grid-cols-2 gap-4">...</div>

<!-- 等宽 12 列(配合 col-span-* 做复杂网格) -->
<div class="grid grid-cols-12 gap-4">
  <div class="col-span-8">主内容(占 8 列)</div>
  <div class="col-span-4">侧栏(占 4 列)</div>
</div>

<!-- 跨行:row-span-* -->
<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <div class="row-span-2">高的</div>
  <div>普通</div>
  <div>普通</div>
</div>

配合 col-span-* / row-span-*,可以拼出复杂的网格——比如"侧栏 + 主内容"的博客布局、仪表板、相册。

8. 响应式 Grid(常用模式)

Grid 最常见的实战模式——"手机单列、平板双列、桌面三列"——配合响应式前缀一行搞定:

<!-- 配合响应式前缀(后面专门一篇讲):
     手机 1 列、平板 2 列、桌面 3 列 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>卡片 1</div>
  <div>卡片 2</div>
  <div>卡片 3</div>
  <div>卡片 4</div>
  <div>卡片 5</div>
  <div>卡片 6</div>
</div>

响应式前缀的具体规则后面专门讲。这里只需记住:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 这种组合是卡片墙、相册、商品列表的标准答案。

9. flex 还是 grid?怎么选

小结

记住这几套万能组合,90% 的布局都能解决:

下一篇我们学颜色与背景,让布局"上色"。

← 上一篇 间距与尺寸

下一篇 颜色与背景 →

✈️💬