[TOC]

布局系统

布局是 Tailwind CSS 最常用的能力之一。本章介绍容器、盒模型、Flex、Grid、定位和层级控制。

容器与宽度

<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
  尊云科技官网内容
</div>

常用宽度类：

类名	说明
`w-full`	宽度 100%
`max-w-md`	最大宽度 medium
`max-w-7xl`	大型页面容器
`min-h-screen`	最小高度为屏幕高度
`h-12`	固定高度

间距

<section class="py-16">
  <div class="space-y-6">
    <h2 class="text-2xl font-bold">标题</h2>
    <p>段落内容</p>
  </div>
</section>

常用间距类：

p-* 内边距
m-* 外边距
px-* 左右内边距
py-* 上下内边距
gap-* 网格或弹性布局间距
space-y-* 子元素纵向间距

Flex 布局

<div class="flex items-center justify-between gap-4">
  <div>左侧</div>
  <div>右侧</div>
</div>

常用类：

类名	说明
`flex`	启用弹性布局
`inline-flex`	行内弹性布局
`items-center`	交叉轴居中
`justify-between`	主轴两端对齐
`flex-col`	垂直方向排列
`flex-wrap`	允许换行

Grid 布局

<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-xl border p-6">卡片</div>
  <div class="rounded-xl border p-6">卡片</div>
  <div class="rounded-xl border p-6">卡片</div>
</div>

常用类：

grid
grid-cols-2
grid-cols-12
col-span-6
gap-4
place-items-center

定位与层级

<div class="relative">
  <img class="w-full rounded-xl" src="https://www.zunyunkeji.com/static/zunyun-ui-preview.jpg" alt="尊云科技示例图">
  <span class="absolute right-3 top-3 z-10 rounded-full bg-black/60 px-3 py-1 text-xs text-white">
    推荐
  </span>
</div>

常用定位类：

relative
absolute
fixed
sticky
inset-0
top-0
right-4
z-10