目录
查看 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 | - |
这两种布局各有优缺点,选择合适的布局方式可以帮助你更好地实现设计需求。