WHAT - Tailwind CSS 的灵活布局（Flex & Grid）

查看 Tailwind CSS 的官方文档：Flexbox & Grid

在 Tailwind CSS 中，flex 和 grid 用于创建灵活的布局。以下是这两种布局的基本设置和常用类。

Flexbox 布局

1. 启用 Flexbox

<div className="flex">
  <!-- 子元素 -->
</div>

2. 主轴方向

• flex-row：水平排列（默认）。
• flex-row-reverse：反向水平排列。
• flex-col：垂直排列。
• flex-col-reverse：反向垂直排列。

3. 交叉轴对齐方式

• items-start：在交叉轴起始位置对齐。
• items-center：在交叉轴中间对齐。
• items-end：在交叉轴末尾对齐.
• items-baseline：在基线对齐。
• items-stretch：默认值，子元素拉伸以填满容器。

4. 主轴对齐方式

• justify-start：在主轴起始位置对齐。
• justify-center：在主轴中间对齐。
• justify-end：在主轴末尾对齐。
• justify-between：子元素均匀分布，首尾对齐。
• justify-around：子元素均匀分布，两边留有空间。
• justify-evenly：子元素均匀分布，间隔相同。

5. 包裹子元素的方式

<div className="flex flex-wrap">
  <!-- 子元素 -->
</div>

6. 子元素 Flex 属性

• flex-1：使子元素占据剩余空间。
• flex-none：不允许子元素缩放。

综合示例

<div className="flex justify-between items-center">
  <div className="flex-1">项1</div>
  <div className="flex-1">项2</div>
  <div className="flex-1">项3</div>
</div>

Grid 布局

1. 启用 Grid

<div className="grid">
  <!-- 子元素 -->
</div>

2. 定义列数

<div className="grid grid-cols-3">
  <!-- 子元素 -->
</div>

3. 列和行的定义

• grid-cols-{n}：定义列数，例如 grid-cols-2、grid-cols-4。
• grid-rows-{n}：定义行数。

4. 列和行的间隔

<div className="grid gap-4">
  <!-- 子元素 -->
</div>

5. 行和列的大小

<div className="grid grid-cols-3 grid-rows-2">
  <div className="col-span-2">占据两列</div>
  <div className="row-span-2">占据两行</div>
</div>

6. 位置和对齐

• items-start、items-center、items-end：在交叉轴上对齐。
• justify-start、justify-center、justify-end：在主轴上对齐。

综合示例

<div className="grid grid-cols-3 gap-4">
  <div className="bg-red-500">项1</div>
  <div className="bg-green-500">项2</div>
  <div className="bg-blue-500">项3</div>
  <div className="bg-yellow-500 col-span-2">占据两列</div>
</div>

---

总结

属性	Flex	Grid
启用布局	flex	grid
方向	flex-row, flex-col	grid-cols-{n}, grid-rows-{n}
对齐	justify-*, items-*	justify-*, items-*
间隔	gap-*	gap-*
包裹	flex-wrap	-

这两种布局各有优缺点，选择合适的布局方式可以帮助你更好地实现设计需求。