Tailwind 布局工具类

用 Tailwind 工具类表达 Flex/Grid 布局，并强调 CSS 布局心智仍是前提。

#type / concept #status / growing #tech / dev / frontend #resource / css

[!info] 关联笔记

所属：布局与响应式

前置：Flex · Grid · 盒模型与布局

Tailwind 布局工具类

这个概念为什么出现

中后台大量“侧栏+主区”“卡片栅格”。不会 Flex/Grid 概念时，工具类只会变成试错字符串。

[!abstract] 一句话理解 Tailwind 布局类是 Flex/Grid 属性缩写；选型仍按一维/二维问题决定。

示例

<div class="flex min-h-screen">
  <aside class="w-60 border-r border-slate-200 p-4">导航</aside>
  <main class="flex-1 p-6">
    <div class="grid gap-4 md:grid-cols-3">
      <div class="rounded-lg border p-4">仓库 A</div>
      <div class="rounded-lg border p-4">仓库 B</div>
      <div class="rounded-lg border p-4">仓库 C</div>
    </div>
  </main>
</div>

选型

问题	倾向
单轴分布/对齐	flex
二维轨道/区域	grid
简单居中	flex 或 grid place-items

本节总结

先问布局问题，再选类名。

自测题

flex-1 解决什么？

参考答案

让子项在弹性容器中伸展占据剩余空间（常见主内容区）。