Tailwind 布局工具类

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

#concept #growing #frontend #css

[!info] related notes

所属：布局与响应式

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

Tailwind 布局工具类

这个概念为什么出现

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

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

示例

<div class="flex min-h-screen flex-col md:flex-row">
  <aside class="w-full shrink-0 border-b border-slate-200 p-4 md:w-60 md:border-b-0 md:border-r">导航</aside>
  <main class="min-w-0 flex-1 p-6">
    <div class="grid grid-cols-1 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>

窄屏先纵向排布，达到默认 md 断点后并排；断点按视口宽度生效，不是主内容区宽度。侧栏 shrink-0 防止被挤窄，主区 min-w-0 允许缩到内容最小宽度以下；长表格仍需自己的溢出策略。

选型

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

本节总结

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

自测题

flex-1 解决什么？

参考答案

允许 flex 子项增长和收缩，从零 flex basis 分配空间。实际宽度还受 min-width、内容与其他子项影响；它不是固定的 100% 宽度。