精通 Flexbox 布局模型，能够灵活运用方向、换行、对齐及间距属性构建一维响应式界面。
掌握 Grid 网格系统的核心类名，学会定义行列结构及处理单元格跨越（Span）以构建复杂二维布局。
理解 flex-grow 和 flex-shrink 的工作原理，实现自适应宽度的动态布局。
熟练区分主轴（Main Axis）与交叉轴（Cross Axis）的对齐控制，解决常见的居中与分布难题。
通过组合使用 Gap、Direction 和 Alignment 属性，高效还原现代 Web 设计稿。
Flexbox 是一种一维布局模型，专为在容器内分配空间和 align 项目而设计。它在处理导航栏、卡片列表和垂直居中等场景时表现卓越。
Flex Direction
决定子元素是水平排列还是垂直排列。
flex-row: 默认值，从左到右水平排列。
flex-row-reverse: 从右到左水平排列。
flex-col: 从上到下垂直排列。
flex-col-reverse: 从下到上垂直排列。
Flex Wrap
当子元素总宽度超过容器时，是否换行。
flex-nowrap: 默认值，不换行（可能导致溢出或压缩子元素）。
flex-wrap: 允许换行，新行从上到下添加。
flex-wrap-reverse: 允许换行，新行从下到上添加（较少用）。
Flex Grow / Shrink
控制子元素在剩余空间中的增长或在空间不足时的收缩行为。
grow: 等同于 flex-grow: 1，允许元素增长以填充剩余空间。
grow-0: 禁止元素增长。
shrink: 等同于 flex-shrink: 1，允许元素在空间不足时收缩。
shrink-0: 禁止元素收缩（常用于固定宽度的头像或图标）。
自适应侧边栏布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Auto Cols 对比演示</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-row h-64 border border-gray-300">
<!-- 固定宽度的侧边栏，禁止收缩 -->
<aside class="w-48 bg-blue-100 shrink-0 p-4">
<h3 class="font-bold">导航菜单</h3>
<ul class="mt-4 space-y-2">
<li>首页</li>
<li>产品</li>
<li>联系</li>
</ul>
</aside>
<!-- 主要内容区，自动占据剩余空间 -->
<main class="flex-1 bg-white p-4 overflow-y-auto">
<h2 class="text-xl font-bold mb-2">主要内容区域</h2>
<p>当窗口缩小时，侧边栏保持宽度，此区域会自动收缩。</p>
<p class="mt-2 text-gray-500">尝试调整浏览器宽度观察效果。</p>
</main>
<!-- 右侧广告位，允许增长 -->
<div class="w-32 bg-yellow-50 grow p-4 hidden md:block">
<p class="text-xs text-center text-gray-500">广告位</p>
</div>
</div>
</body>
</html>对齐是 Flexbox 最强大的功能之一，分为“主轴对齐”和“交叉轴对齐”。
Justify Content
控制子元素在主轴（由 flex-direction 决定）上的分布方式。
justify-start: 起始端对齐（默认）。
justify-end: 末端对齐。
justify-center: 居中对齐。
justify-between: 两端对齐，中间元素均匀分布。
justify-around: 每个元素两侧间距相等（边缘间距为中间的一半）。
justify-evenly: 所有间距完全相等（包括边缘）。
Align Items & Align Self
控制子元素在交叉轴（垂直于主轴的方向）上的对齐方式。
items-start / end / center: 交叉轴的起始、末端或居中对齐。
items-baseline: 基于文本基线对齐（适用于字号不同的文本行）。
items-stretch: 默认值，拉伸子元素以填满容器高度（需子元素未设置固定高度）。
self-*: align-self 的映射，用于单独覆盖某个子元素的对齐方式（如 self-center, self-end）。
Gap
直接在容器上设置子元素间的间距，无需使用 margin。
gap-4: 行和列间距均为 1rem (16px)。
gap-x-4: 仅水平方向（列）间距。
gap-y-4: 仅垂直方向（行）间距。
完美的居中与分布
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Auto Cols 对比演示</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- 场景 1: 水平垂直居中 -->
<div class="flex items-center justify-center h-40 bg-gray-100 border mb-4">
<div class="bg-blue-500 text-white px-4 py-2 rounded">绝对居中</div>
</div>
<!-- 场景 2: 两端对齐，中间自动推开 -->
<div class="flex justify-between items-center h-40 bg-gray-100 border mb-4 px-4">
<span class="font-bold">Logo</span>
<nav class="flex gap-4">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</nav>
</div>
<!-- 场景 3: 基线对齐 (不同字号) -->
<div class="flex items-baseline gap-4 h-40 bg-gray-100 border mb-4 px-4">
<span class="text-3xl font-bold">大标题</span>
<span class="text-sm text-gray-500">副标题说明文字</span>
<span class="text-lg">中等内容</span>
</div>
<!-- 场景 4: 单独覆盖对齐 (self-end) -->
<div class="flex items-center h-40 bg-gray-100 border px-4 gap-4">
<div class="h-20 w-20 bg-red-200">默认拉伸/居中</div>
<div class="h-32 w-20 bg-green-200 self-end">底部对齐</div>
<div class="h-24 w-20 bg-blue-200 self-center">再次居中</div>
</div>
</body>
</html>Grid 是二维布局模型，能同时处理行和列，非常适合构建复杂的页面骨架、仪表盘和图片画廊。
Template Columns / Rows
Tailwind 默认提供 1 到 12 列的快捷类，也支持自定义行数。
grid-cols-n: 创建 n 列等宽网格（如 grid-cols-1, grid-cols-2, grid-cols-12）。
grid-rows-n: 创建 n 行等高网格（如 grid-rows-1, grid-rows-3）。
注: 若需非等分列（如 1fr 2fr），可使用任意值语法 grid-cols-[1fr_2fr]。
Column / Row Span
让单个元素跨越多个列或行。
col-span-n: 横跨 n 列（如 col-span-2, col-span-full 占满整行）。
row-span-n: 纵跨 n 行（如 row-span-2, row-span-full 占满整列）。
响应式仪表盘布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Tailwind Auto Cols 对比演示</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 p-6 bg-gray-50">
<!-- 头部统计卡：在小屏占满，中屏以上占 1 列 -->
<div class="col-span-1 md:col-span-1 bg-white p-4 rounded shadow border-l-4 border-blue-500">
<h4 class="text-gray-500 text-sm">总访问量</h4>
<p class="text-2xl font-bold">12,345</p>
</div>
<div class="col-span-1 md:col-span-1 bg-white p-4 rounded shadow border-l-4 border-green-500">
<h4 class="text-gray-500 text-sm">新用户</h4>
<p class="text-2xl font-bold">892</p>
</div>
<div class="col-span-1 md:col-span-1 bg-white p-4 rounded shadow border-l-4 border-purple-500">
<h4 class="text-gray-500 text-sm">转化率</h4>
<p class="text-2xl font-bold">3.2%</p>
</div>
<div class="col-span-1 md:col-span-1 bg-white p-4 rounded shadow border-l-4 border-orange-500">
<h4 class="text-gray-500 text-sm">服务器负载</h4>
<p class="text-2xl font-bold">45%</p>
</div>
<!-- 主图表区域：跨 3 列 -->
<div class="col-span-1 md:col-span-3 bg-white p-6 rounded shadow min-h-[300px]">
<h3 class="font-bold text-lg mb-4">流量趋势图</h3>
<div class="h-48 bg-gray-100 flex items-center justify-center text-gray-400">
[图表占位符]
</div>
</div>
<!-- 侧边通知栏：跨 1 列，跨 2 行高度（需配合 grid-rows 定义） -->
<!-- 此处为了演示 span，假设父容器有足够行高 -->
<div class="col-span-1 md:col-span-1 row-span-2 bg-white p-4 rounded shadow">
<h3 class="font-bold text-lg mb-2">系统通知</h3>
<ul class="space-y-2 text-sm text-gray-600">
<li class="border-b pb-2">• 系统维护完成</li>
<li class="border-b pb-2">• 新版本上线</li>
<li>• 安全补丁已应用</li>
</ul>
</div>
<!-- 底部日志：跨满全行 -->
<div class="col-span-full bg-white p-4 rounded shadow">
<h3 class="font-bold text-sm text-gray-500">最新日志</h3>
<p class="text-xs font-mono mt-1 text-gray-400">2026-03-12 16:28:00 INFO System started successfully...</p>
</div>
</div>
</body>
</html>