Tailwind CSS V4 Flexbox 与 Grid 完全对比指南（选型 + 实战 + 新特性）

Flexbox 和 Grid 是网页布局的两大基石。Tailwind CSS V4 对两者均进行了能力增强：新增 safe 安全对齐、完善 subgrid 子网格、支持精细 auto-flow、搭配 V4 独有的 @max-* 向下断点 + 容器查询自适应。

很多人只会用，但不知道什么时候用 Flex、什么时候用 Grid。本文用「对比思维 + 实战场景」彻底讲透，包含完整 API、业务选型、易错点、V4 新特性、可运行 Demo。

一、核心选型口诀（记住就不会选错）

• Flexbox：一维布局 → 要么横向、要么纵向。适合：导航、按钮组、卡片流、居中、左右自适应
• Grid：二维布局 → 同时控制行和列。适合：规整栅格、矩阵卡片、复杂图文混排、跨行跨列布局

最简判断：只需要一行/一列排布用 Flex；需要像表格一样「整齐行列」用 Grid。

二、V4 相比 V3 的关键升级

• ✅ 全局支持 safe 安全对齐：justify-safe-center / items-safe-center，小屏不截断
• ✅ 完善 subgrid 子网格，统一子元素行列对齐
• ✅ place-content 全套安全模式
• ✅ 配合 V4 @max-* 断点，实现「大屏多列、小屏逐减」完美响应式
• ✅ 变体顺序改为 左到右，层级逻辑更自然

上篇：Flexbox 弹性布局（一维）

1. 开启 Flex 容器

flex        /* 块级弹性容器 */
inline-flex /* 行内弹性容器 */

2. 主轴方向 direction

flex-row            /* 横向从左到右（默认） */
flex-row-reverse    /* 横向反转 */
flex-col            /* 纵向从上到下 */
flex-col-reverse    /* 纵向反转 */

3. 自动换行 wrap（最容易漏写）

flex-wrap       /* 自动换行（必备） */
flex-nowrap     /* 不换行，挤压溢出（默认） */
flex-wrap-reverse

业务避坑：做卡片流、列表自适应，必须加 flex-wrap，否则小屏直接横向溢出。

4. 主轴对齐 justify（水平为主）

justify-start
justify-center
justify-end
justify-between     /* 两端对齐，中间均分 */
justify-around
justify-evenly/* V4 新增：安全对齐，超小屏不会截断 */
justify-safe-center
justify-safe-end

5. 交叉轴对齐 items（垂直为主）

items-start
items-center
items-end
items-baseline
items-stretch/* V4 新增安全对齐 */
items-safe-center
items-safe-end

6. 子元素弹性缩放 flex 权重

flex-1      /* 均分剩余空间（万能自适应） */
flex-auto   /* 根据内容自适应宽度 */
flex-none   /* 固定尺寸，不挤压不缩放 */

7. Flex 高频业务模板

① 页面垂直水平居中

<div class="flex items-center justify-center min-h-screen"></div>

② 左右布局（左固定右自适应）

<div class="flex">
  <div class="w-40 flex-none">侧边栏固定</div>
  <div class="flex-1">主内容自适应填充</div>
</div>

③ 自适应卡片流（自动换行）

<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[280px]">卡片</div>
</div>

下篇：Grid 网格布局（二维）

Grid 是行列同时控制的布局，适合整齐、对称、矩阵式页面结构。

1. 开启网格容器

grid        /* 块级网格 */
inline-grid /* 行内网格 */

2. 列模板 grid-cols（最常用）

grid-cols-1 ~ grid-cols-12  /* 快速等分 */
grid-cols-subgrid           /* V4强化：子网格继承父网格 */

3. 行模板 grid-rows

grid-rows-1 ~ grid-rows-12
grid-rows-subgrid

4. 间距 gap

gap-4       /* 行列统一间距 */
gap-x-4     /* 水平间距 */
gap-y-4     /* 垂直间距 */

5. 单元格合并（跨行跨列）

col-span-2     /* 横跨2列 */
row-span-2     /* 纵跨2行 */

6. 网格自动流 grid-auto-flow

grid-flow-row
grid-flow-col
grid-flow-dense        /* 自动填充空白，紧凑排版 */
grid-flow-row-dense

7. 整体一键居中 place-items

place-items-center  /* 同时水平+垂直居中（Grid最强简写）

8. V4 专属 Grid 响应式写法（@max-*）

V4 新增最大断点，轻松实现「大屏多列、逐级降级」，比 V3 更贴合业务：

<div class="grid grid-cols-4 @max-xl:grid-cols-3 @max-lg:grid-cols-2 @max-md:grid-cols-1 gap-6"></div>

9. Grid 高频业务模板

① 标准响应式栅格

<div class="grid grid-cols-3 @max-lg:grid-cols-2 @max-sm:grid-cols-1 gap-4"></div>

② 不规则跨行布局

<div class="grid grid-cols-2 grid-rows-2 gap-4 h-80">
  <div class="col-span-2">通栏头部</div>
  <div class="row-span-2">侧边高栏</div>
  <div>内容块</div>
</div>

三、Flex vs Grid 终极对比（面试/业务必看）

四、V4 独家避坑清单

• ❌ Flex 做自适应卡片流 不写 flex-wrap → 小屏溢出
• ❌ Flex 想固定一侧，忘记加 flex-none → 固定栏被挤压
• ❌ V3 旧项目迁移：变体顺序从右→左 改为 左→右，复杂布局需微调
• ✅ 小屏内容挤压，优先替换为 justify-safe-center / items-safe-center
• ✅ 规整矩阵优先 Grid，不要强行多层 Flex 嵌套
• ✅ V4 响应式栅格优先使用 @max-* 向下适配，适配更细腻

五、完整可运行 Demo（V4 CDN）

包含 Flex 自适应、Grid 响应式、safe 安全对齐、@max 断点、subgrid 演示，直接保存打开即可。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind V4 Flex vs Grid Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @theme {
      --color-card: #f0f7ff;
    }
  </style>
</head>
<body class="p-6 bg-slate-100">
  <h1 class="text-3xl font-bold text-center mb-10">V4 Flexbox / Grid 实战演示</h1>

  <!-- Flex 一维流式布局 -->
  <section class="mb-12">
    <h2 class="text-xl font-semibold mb-4">1. Flex 流式自适应（一维）</h2>
    <div class="flex flex-wrap gap-4 justify-safe-center bg-white p-6 rounded-lg shadow">
      <div class="w-40 h-20 bg-blue-500 rounded text-white flex items-center justify-center">1</div>
      <div class="w-40 h-20 bg-blue-600 rounded text-white flex items-center justify-center">2</div>
      <div class="w-40 h-20 bg-blue-700 rounded text-white flex items-center justify-center">3</div>
      <div class="w-40 h-20 bg-blue-800 rounded text-white flex items-center justify-center">4</div>
    </div>
  </section>

  <!-- Grid 二维矩阵布局 -->
  <section class="mb-12">
    <h2 class="text-xl font-semibold mb-4">2. Grid 响应式矩阵（V4 @max 断点）</h2>
    <div class="grid grid-cols-4 @max-xl:grid-cols-3 @max-lg:grid-cols-2 @max-md:grid-cols-1 gap-4">
      <div class="h-24 bg-emerald-500 rounded flex items-center justify-center text-white">Grid 1</div>
      <div class="h-24 bg-emerald-600 rounded flex items-center justify-center text-white">Grid 2</div>
      <div class="h-24 bg-emerald-700 rounded flex items-center justify-center text-white">Grid 3</div>
      <div class="h-24 bg-emerald-800 rounded flex items-center justify-center text-white">Grid 4</div>
    </div>
  </section>

  <!-- Grid 跨行跨列 -->
  <section class="mb-12">
    <h2 class="text-xl font-semibold mb-4">3. Grid 跨行跨列布局</h2>
    <div class="grid grid-cols-2 grid-rows-2 gap-4 h-60">
      <div class="col-span-2 bg-orange-500 rounded text-white flex items-center justify-center">通栏 col-span-2</div>
      <div class="row-span-2 bg-orange-600 rounded text-white flex items-center justify-center">跨行 row-span-2</div>
      <div class="bg-orange-400 rounded text-white flex items-center justify-center">普通块</div>
    </div>
  </section>

  <!-- V4 safe 安全对齐 -->
  <section>
    <h2 class="text-xl font-semibold mb-4">4. V4 safe 安全居中（小屏不截断）</h2>
    <div class="grid place-items-safe-center h-32 bg-white rounded shadow">
      <div class="text-lg font-medium">缩小屏幕测试安全居中</div>
    </div>
  </section>

</body>
</html>

总结

Flex 负责自由流式，Grid 负责规整矩阵，这是 V4 布局体系的核心思想。

日常开发遵循：简单排布用 Flex、规整栅格用 Grid、自适应流用 Flex-wrap、复杂矩阵用 Grid-span、小屏兼容开 safe、精细响应用 @max-*。V4 的一系列升级，让两大布局彻底告别适配瑕疵，实现更稳定、更细腻的页面排版。

Tailwind CSS V4 Flexbox & Grid 高频速查表

可直接复制保存，开发时快速查阅，只保留高频实用类，附带原生CSS含义、业务说明，区分V4新增特性

Flexbox 弹性布局（一维）

容器类（父元素）

子元素类（子项）

Flex 常用模板

<!-- 页面水平垂直居中 -->
<div class="flex items-center justify-center min-h-screen"></div>
<!-- 左固定，右自适应 -->
<div class="flex">
  <div class="w-40 flex-none">侧边栏</div>
  <div class="flex-1">主内容</div>
</div>
<!-- 自适应卡片流，自动换行 -->
<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[280px]">卡片</div>
</div>

Grid 网格布局（二维）

容器类（父元素）

子元素类（子项）

Grid 常用模板

<!-- V4响应式栅格 @max 断点 -->
<div class="grid grid-cols-4 @max-xl:grid-cols-3 @max-lg:grid-cols-2 @max-md:grid-cols-1 gap-6"></div>
<!-- 跨行跨列布局 -->
<div class="grid grid-cols-2 grid-rows-2 gap-4 h-80">
  <div class="col-span-2">通栏头部</div>
  <div class="row-span-2">侧边栏</div>
  <div>内容块</div>
</div>

✅ V4专属特性速记

1. @max-* 断点：大屏到小屏逐级降级，@max-lg 代表屏幕宽度≤lg时生效
2. xxx-safe-center：安全对齐，内容溢出时不会被截断
3. subgrid 子网格：子网格继承父网格轨道，实现卡片内部对齐统一
4. 变体顺序：从左向右，和V3相反

选型快速判断

• 一维（单行/单列）、内容自由排布 → Flex
• 二维，同时控制行列，规整矩阵 → Grid
• 卡片流式自适应 → Flex + flex-wrap
• 商品相册、仪表盘栅格 → Grid

避坑要点

1. Flex卡片流一定要加 flex-wrap，否则小屏横向溢出
2. Flex固定侧边栏必须加 flex-none，防止被挤压
3. Grid跨行跨列用 col-span / row-span，不要多层Flex嵌套
4. V4迁移旧项目，注意变体顺序差异