Flex 布局（弹性盒子）是现代网页布局的 “终极方案” 之一。在传统 CSS 中，想要实现水平垂直居中、等分排列是非常麻烦的。但在 Tailwind CSS 中，我们只需给容器加上一个 flex 类名，剩下的交给几个直观的辅助类名就可以完成了。
Tailwind CSS Flex 基础
在 Tailwind CSS 中，开启 Flex 布局的第一步，就是给父容器加上一个 “flex” 类名（等价于 display: flex;）。然后，我们可以通过以下类名来控制内部子元素的排列方式。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| flex-row（默认） | flex-direction: row; | 水平排列（从左往右） |
| flex-col | flex-direction: column; | 垂直排列（从上往下） |
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| justify-start（默认） | justify-content: flex-start; | 主轴起边对齐 |
| justify-center | justify-content: center; | 主轴居中对齐 |
| justify-between | justify-content: space-between; | 两端对齐（中间留空） |
| items-center | align-items: center; | 交叉轴居中对齐 |
Flex 布局本身是比较复杂的，如果小伙伴们对这块不熟悉，一定要把原生 CSS Flex 布局相关的属性都搞清楚了，再来学习本节内容。其中，Flex 布局主要属性如下表所示。
| 属性 | 说明 |
|---|---|
| flex-direction | 定义弹性容器的主轴方向 |
| flex-wrap | 控制弹性项目是否换行 |
| flex-flow | 简写属性，设置 flex 方向和换行 |
| justify-content | 设置主轴上的对齐方式 |
| align-content | 设置交叉轴上的多行对齐方式 |
| align-items | 设置交叉轴上的项目对齐方式 |
| align-self | 设置单个弹性项目的对齐方式 |
| row-gap | 设置行之间的间距 |
| column-gap | 设置列之间的间距 |
| gap | 简写属性，设置行和列的间距 |
| flex-grow | 定义弹性项目的放大比例 |
| flex-shrink | 定义弹性项目的缩小比例 |
| flex-basis | 设置弹性项目的基础尺寸 |
| flex | 简写属性，设置弹性项目的生长、缩小和基础尺寸 |
| order | 设置弹性项目的排列顺序 |
示例 1：水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="flex justify-center items-center w-full h-48 bg-red-300">
<div class="w-20 h-10 bg-green-300"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在传统的 CSS 中，使用 flex 来实现垂直居中，至少需要写 3-4 行代码。而使用了 Tailwind CSS 之后，我们只需要使用 3 个类名即可。
flex：开启弹性布局。justify-center：控制子元素在水平方向（主轴）上居中。items-center：控制子元素在垂直方向（交叉轴）上居中。
Tailwind CSS Flex 间距
在 Flex 布局中，给子元素之间加间距是非常高频的操作之一。以前我们需要给每个子元素设置 margin-right，还要处理最后一个元素的间距溢出。
在 Tailwind CSS 中，我们只需在父容器上加一个 “gap-*” 类名就可以为子元素快速定义间距。
语法：
gap-{值}说明：
这里的 “值” 可以是一个 “数字”，比如：
gap-1：表示间距为 4px。gap-2：表示间距为 8px。gap-3：表示间距为 12px。- ……
此外，“值” 也可以是任意值，比如 “gap-[10px]” 表示间距为 10px。
示例 2：等距排列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="flex gap-4 p-4 bg-green-100 rounded-lg">
<div class="w-12 h-12 bg-green-500 rounded"></div>
<div class="w-12 h-12 bg-green-500 rounded"></div>
<div class="w-12 h-12 bg-green-500 rounded"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
需要注意的是，gap-4 是直接写在父容器上的。然后，它会自动处理好子元素之间的间距，而且最左边和最右边不会有多余的间隙。这个技巧在制作导航栏、列表组时非常有用。
Tailwind CSS Flex 允许换行
在默认情况下，Flex 容器非常 “死板固执”：如果里面的子元素太多，哪怕把子元素挤变形，它也绝不允许子元素掉到第二行去。
在 Tailwind CSS 中，如果我们希望一行装不下时，能自动换到下一行。这时候就需要加上 “flex-wrap” 这个类名。
语法：
flex-wrap说明：
Tailwind CSS 中的 flex-wrap 类名，等价于传统 CSS 中的 flex-wrap: wrap;。
示例 3：flex-wrap 允许换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<div class="flex flex-wrap gap-3 w-64 p-4 bg-blue-50 border border-blue-200 rounded-lg">
<div class="px-4 py-1 bg-blue-500 text-white rounded">HTML</div>
<div class="px-4 py-1 bg-blue-500 text-white rounded">CSS</div>
<div class="px-4 py-1 bg-blue-500 text-white rounded">JavaScript</div>
<div class="px-4 py-1 bg-blue-500 text-white rounded">Vue</div>
<div class="px-4 py-1 bg-blue-500 text-white rounded">React</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
如果我们把 flex-wrap 删除，此时页面效果如下图所示。
也就是说，如果不使用 flex-wrap，这 5 个子元素会被强行排在一行。而加上了 flex-wrap 之后，子元素就会自动换行了，就跟文本换行一样自然。
常见问题
1. 为什么我为元素设置了 items-center 之后，其内部的文本却没有垂直居中呢？
items-center 针对的是容器内 “子元素” 的垂直居中。如果想要让文本在元素内垂直居中，我们也需要让这个元素成为 flex 容器才行。
2. justify-center 和 items-center 这两个到底如何区分呢？
这是新手最容易弄混的地方。小伙伴们可以记住一个简单的口诀：
justify：控主轴（默认是左右挪动）。items：控交叉轴（默认是上下挪动）。
