Tailwind CSS 中的尺寸和布局

发表于 更新于 分类于
Tailwind CSS 中的尺寸和布局

前言

页面布局是前端日常开发里最高频的工作之一：定宽高、排列元素、控制间距，几乎每个组件都要用到。
Tailwind CSS 把这三类需求拆成原子工具类——w-* / h-* 控制尺寸，flex / grid 系列负责排列，p-* / m-* / gap-* 处理留白——命名规律统一，记一次就能覆盖大多数场景。

本文是对 尺寸与布局 的专项梳理，涵盖：

  • 尺寸：固定值、百分比、视口单位与 min/max 约束
  • 布局：Flexbox 与 Grid 的常用类名及典型组合
  • 间距：padding、margin 与 space 系工具类

文中附上关键类名的 CSS 对照表和可直接复制的代码片段，适合开发时随手查阅。

尺寸

宽度和高度使用 w-* 和 h-*，支持固定值和百分比。

1
2
3
4
5
6
7
8
9
<!-- 固定宽度 -->
<div class="w-64 h-32">固定尺寸</div>

<!-- 百分比 -->
<div class="w-full">全宽</div>
<div class="w-1/2">半宽</div>

<!-- 最小/最大宽高 -->
<div class="min-w-0 max-w-screen-lg">限制宽度</div>

w-screen 和 h-screen 对应视口宽高，w-fit 和 w-min、w-max 分别对应内容尺寸和最大内容尺寸。

Class Properties
w-0 width: 0px;
w-px width: 1px;
w-0.5 width: 0.125rem; /_ 2px _/
w-1 width: 0.25rem; /_ 4px _/
w-1.5 width: 0.375rem; /_ 6px _/
w-2 width: 0.5rem; /_ 8px _/
w-auto width: auto;
w-1/2 width: 50%;
w-1/3 width: 33.333333%;
w-1/4 width: 25%;
w-1/6 width: 16.666667%;
w-1/12 width: 8.333333%;
w-full width: 100%;
w-screen width: 100vw;
w-svw width: 100svw;
w-lvw width: 100lvw;
w-dvw width: 100dvw;
w-min width: min-content;
w-max width: max-content;
w-fit width: fit-content;

布局

Tailwind 提供了完整的 Flexbox 和 Grid 工具类，足以覆盖绝大多数布局场景。

Flex 布局

Tailwind CSS 提供了非常完善的 Flexbox 工具类。

以下是按功能分类的常用参数示例及代码演示：

基础与方向

类名 CSS 属性 说明
flex display: flex 启用 Flex 布局
inline-flex display: inline-flex 行内 Flex 布局
flex-row flex-direction: row 水平排列（默认）
flex-col flex-direction: column 垂直排列
flex-row-reverse flex-direction: row-reverse 水平反向排列
flex-col-reverse flex-direction: column-reverse 垂直反向排列 
1
2
3
4
<!-- 垂直居中布局 -->
<div class="flex flex-col items-center justify-center h-screen">
  <p>内容垂直水平居中</p>
</div>

换行 (Wrap)

类名 CSS 属性 说明
flex-wrap flex-wrap: wrap 允许换行
flex-nowrap flex-wrap: nowrap 不换行（默认）
flex-wrap-reverse flex-wrap: wrap-reverse 反向换行

交叉轴对齐 (Align Items / Content)

单行对齐 (align-items)：

  • items-start / items-end / items-center / items-baseline / items-stretch(默认)

多行对齐 (align-content)：

  • content-start / content-end / content-center / content-between / content-around / content-evenly

主轴对齐 (Justify Content)

类名 CSS 属性 说明
justify-start justify-content: flex-start 起始对齐
justify-end justify-content: flex-end 末尾对齐
justify-center justify-content: center 居中对齐
justify-between justify-content: space-between 两端对齐，中间等距
justify-around justify-content: space-around 每个项目两侧等距
justify-evenly justify-content: space-evenly 所有间距完全相等

子项属性

类名 CSS 属性 说明
flex-1 flex: 1 1 0% 等分剩余空间
flex-auto flex: 1 1 auto 基于内容大小伸缩
flex-initial flex: 0 1 auto 不放大，可缩小（默认）
flex-none flex: none 固定尺寸，不伸缩
grow / grow-0 flex-grow: 1/0 控制是否放大
shrink / shrink-0 flex-shrink: 1/0 控制是否缩小
order-{n} order: n 改变显示顺序 (1~12, first, last, none)
self-start/end/center/stretch/baseline/auto align-self 单独控制某子项的交叉轴对齐

剩余空间按 1:2 分配

1
2
3
4
5
6
<!-- 固定宽度 + 剩余空间按 1:2 分配 -->
<div class="flex">
  <div class="flex-none w-48">固定侧栏</div>
  <div class="flex-1">1份</div>
  <div class="flex-[2]">2份</div>
</div>

Gap 间距

类名 说明
gap-{size} 行列统一间距，如 gap-4(1rem)
gap-x-{size} 仅列间距
gap-y-{size} 仅行间距

💡 提示：在 Flex 布局中优先使用 gap 代替子元素的 margin，可以避免首尾多余间距问题。

响应式前缀

所有上述类都支持响应式断点前缀：

1
2
3
4
5
6
<!-- 移动端竖排，桌面端横排 -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1">Item 1</div>
  <div class="flex-1">Item 2</div>
  <div class="flex-1">Item 3</div>
</div>

断点参考：sm(640px)、md(768px)、lg(1024px)、xl(1280px)、2xl(1536px)

最常见组合

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 完美居中 -->
<div class="flex items-center justify-center">...</div>

<!-- 底部固定按钮 -->
<div class="flex justify-end mt-auto">...</div>

<!-- 等高卡片列表 -->
<div class="flex flex-wrap gap-6">
  <div class="flex-1 min-w-[300px]">Card</div>
  <div class="flex-1 min-w-[300px]">Card</div>
  <div class="flex-1 min-w-[300px]">Card</div>
</div>

如需查看完整官方文档或交互式调试，可访问 Tailwind CSS Flexbox 文档。

Grid 布局

使用 grid 开启网格布局，grid-cols-* 定义列数：

1
2
3
4
5
6
<!-- 三列等宽 -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-100 p-4">A</div>
  <div class="bg-gray-100 p-4">B</div>
  <div class="bg-gray-100 p-4">C</div>
</div>

也可以用 grid-cols-[200px_1fr] 这种方括号写法自定义列宽，适合侧边栏 + 内容区的经典布局。

1
2
<div class="grid grid-cols-3 gap-x-4 gap-y-3">
</div>

间距

Tailwind 用 p-* 和 m-* 设置内边距和外边距，数值对应 0.25rem 的倍数。

Padding（内边距）

p-* 设置四个方向的内边距，也可以按方向单独设置：

前缀 作用方向
p 四个方向
px 左右
py 上下
pt 上
pr 右
pb 下
pl 左

常用数值速查：

Class Properties
p-0 padding: 0px;
p-px padding: 1px;
p-0.5 padding: 0.125rem; /_ 2px _/
p-1 padding: 0.25rem; /_ 4px _/
p-1.5 padding: 0.375rem; /_ 6px _/
p-2 padding: 0.5rem; /_ 8px _/
p-2.5 padding: 0.625rem; /_ 10px _/
p-3 padding: 0.75rem; /_ 12px _/
p-3.5 padding: 0.875rem; /_ 14px _/
p-4 padding: 1rem; /_ 16px _/
p-5 padding: 1.25rem; /_ 20px _/
p-6 padding: 1.5rem; /_ 24px _/
p-8 padding: 2rem; /_ 32px _/
p-10 padding: 2.5rem; /_ 40px _/
p-12 padding: 3rem; /_ 48px _/
p-16 padding: 4rem; /_ 64px _/
p-20 padding: 5rem; /_ 80px _/
p-24 padding: 6rem; /_ 96px _/

以上数值同样适用于 px、py、pt、pr、pb、pl 前缀。

1
2
3
4
5
6
7
8
<!-- 四周统一内边距 -->
<div class="p-4">padding: 1rem</div>

<!-- 水平和垂直分别设置 -->
<div class="px-6 py-4">左右 1.5rem，上下 1rem</div>

<!-- 单独设置某一方向 -->
<div class="pt-8 pb-4 pl-6 pr-6">上 2rem，下 1rem，左右 1.5rem</div>

Margin（外边距）

m-* 设置四个方向的外边距，方向前缀与 padding 一致：

前缀 作用方向
m 四个方向
mx 左右
my 上下
mt 上
mr 右
mb 下
ml 左

常用数值速查：

Class Properties
m-0 margin: 0px;
m-px margin: 1px;
m-0.5 margin: 0.125rem; /_ 2px _/
m-1 margin: 0.25rem; /_ 4px _/
m-1.5 margin: 0.375rem; /_ 6px _/
m-2 margin: 0.5rem; /_ 8px _/
m-2.5 margin: 0.625rem; /_ 10px _/
m-3 margin: 0.75rem; /_ 12px _/
m-3.5 margin: 0.875rem; /_ 14px _/
m-4 margin: 1rem; /_ 16px _/
m-5 margin: 1.25rem; /_ 20px _/
m-6 margin: 1.5rem; /_ 24px _/
m-8 margin: 2rem; /_ 32px _/
m-10 margin: 2.5rem; /_ 40px _/
m-12 margin: 3rem; /_ 48px _/
m-16 margin: 4rem; /_ 64px _/
m-20 margin: 5rem; /_ 80px _/
m-24 margin: 6rem; /_ 96px _/
m-auto margin: auto;

Margin 支持负值，用 - 前缀表示：

Class Properties
-m-1 margin: -0.25rem; /_ -4px _/
-m-2 margin: -0.5rem; /_ -8px _/
-m-4 margin: -1rem; /_ -16px _/
-m-8 margin: -2rem; /_ -32px _/ 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 四周统一外边距 -->
<div class="m-4">margin: 1rem</div>

<!-- 水平居中（块级元素） -->
<div class="mx-auto w-96">左右 auto 实现水平居中</div>

<!-- 上下间隔 -->
<div class="my-8">上下各 2rem 外边距</div>

<!-- 负边距（常用于抵消父元素 padding） -->
<div class="p-4">
  <div class="-mx-4 bg-gray-100 p-4">负边距撑满父容器</div>
</div>

<!-- 单方向设置 -->
<h2 class="mt-8 mb-4">标题上方留白多，下方留白少</h2>

space 间距

space-x-* 和 space-y-* 可以在不使用 gap 的情况下给子元素统一加间距（原理是给除第一个子元素外的元素添加 margin）：

1
2
3
4
5
6
7
8
9
10
11
<div class="flex space-x-4">
  <button>按钮 1</button>
  <button>按钮 2</button>
  <button>按钮 3</button>
</div>

<div class="space-y-4">
  <p>段落 1</p>
  <p>段落 2</p>
  <p>段落 3</p>
</div>

space-x-reverse 和 space-y-reverse 用于反转排列时修正间距方向。