WHAT - Tailwind CSS 的灵活布局（Flex Grid）
目录
- Flexbox 布局
- 1. 启用 Flexbox
- 2. 主轴方向
- 3. 交叉轴对齐方式
- 4. 主轴对齐方式
- 5. 包裹子元素的方式
- 6. 子元素 Flex 属性
- 综合示例
- Grid 布局
- 1. 启用 Grid
- 2. 定义列数
- 3. 列和行的定义
- 4. 列和行的间隔
- 5. 行和列的大小
- 6. 位置和对齐
- 综合示例
- 总结
查看 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 | - |
这两种布局各有优缺点，选择合适的布局方式可以帮助你更好地实现设计需求。