Tailwind CSS Flexbox 布局类怎么用？常见 Flex 布局如何写？
Tailwind CSS 里做 Flexbox 布局，核心就是把 CSS 的 display: flex、flex-direction、justify-content、align-items、flex-wrap、flex-grow 等属性换成原子类。它适合做一维布局：一行导航、一列菜单、左右内容区、按钮组、卡片内部对齐都很顺手。
如果页面要同时控制行和列，比如完整商品列表、后台仪表盘、复杂二维卡片墙，通常 Grid 更省心；如果只是沿着一个方向排列元素，Flex 更直接。
启用 Flex：flex 和 inline-flex 有什么区别？
最常用的两个入口类是：flex 生成块级 Flex 容器，inline-flex 生成内联 Flex 容器。
<div class="flex items-center gap-2"> <span>图标</span> <span>文字</span> </div> <button class="inline-flex items-center gap-1"> <span>+</span> <span>新增</span> </button>
flex 会像普通 div 一样占据一整行，inline-flex 更像 inline-block，宽度跟内容走，常用于按钮、标签、徽章这类小组件。
方向控制：flex-row、flex-col 怎么选？
<div class="flex flex-row gap-4"> <div>左</div> <div>中</div> <div>右</div> </div> <div class="flex flex-col gap-3"> <label>用户名</label> <input class="border p-2" /> </div>
大多数横向布局用 flex-row，表单、侧边栏菜单、竖向列表用 flex-col。反向类偶尔用于视觉顺序和 DOM 顺序不一致的场景，但不要滥用，否则键盘访问和读屏顺序可能让人困惑。
主轴和交叉轴怎么对齐？
justify-* 对应 justify-content，控制主轴方向上的对齐方式；items-* 对应 align-items，控制交叉轴上的对齐。
<nav class="flex items-center justify-between p-4"> <div class="font-bold">Logo</div> <div class="flex gap-4"> <a href="#">首页</a> <a href="#">文章</a> <a href="#">关于</a> </div> </nav>
导航栏常用 justify-between，头像加文字常用 items-center。多行文字和单行文字混排时，如果视觉上总觉得不齐，可以试试 items-baseline。
content-* 控制多行 Flex 内容在交叉轴上的整体分布，只有容器开启 flex-wrap 并且有多行时才明显。
换行和项目伸缩怎么控制？
Flex 默认不换行，也就是 flex-nowrap。标签列表、按钮列表、卡片行经常需要 flex-wrap。
<div class="flex flex-wrap gap-3"> <span class="rounded bg-gray-100 px-3 py-1">Tailwind</span> <span class="rounded bg-gray-100 px-3 py-1">Flexbox</span> </div>
子项自己的宽度和伸缩由 flex-*、basis-*、grow、shrink 控制。
<div class="flex gap-4"> <aside class="w-64 flex-none bg-gray-100">侧边栏</aside> <main class="min-w-0 flex-1 bg-white">主内容</main> </div>
flex-1 会吃掉剩余空间，flex-none 不放大也不收缩，shrink-0 适合头像、图标按钮这类不希望被挤变形的元素。
默认 Tailwind 里没有 flex-3、flex-grow-2。如果要表达“内容区是侧边栏 3 倍宽”，可以用 basis-1/4 + basis-3/4，或任意值：
<div class="flex gap-4"> <aside class="flex-1">Sidebar</aside> <main class="flex-[3_1_0%] min-w-0">Content</main> </div>
order、self、gap 和 space 怎么用？
order-* 可以调整视觉顺序：
<div class="flex flex-col gap-4 md:flex-row"> <main class="order-2 md:order-1">正文</main> <aside class="order-1 md:order-2">筛选条件</aside> </div>
但可访问性和键盘焦点顺序仍然跟 DOM 有关，不要只为了视觉方便随意颠倒重要内容。
self-* 可以覆盖单个项目的交叉轴对齐。
间距优先用 gap-*：
<div class="flex flex-wrap gap-x-6 gap-y-3"> <span>标签 A</span> <span>标签 B</span> </div>
space-x-* / space-y-* 适合不换行的简单列表。如果列表会换行，space-x-* 往往会出现行首多余间距，换成 gap-* 更稳。
常见 Flex 布局怎么写？
水平垂直居中：
<div class="flex min-h-screen items-center justify-center"> <div class="rounded-lg bg-white p-6 shadow">居中内容</div> </div>
顶部导航栏：
<nav class="flex items-center justify-between p-4"> <a class="font-bold" href="#">Logo</a> <ul class="hidden gap-6 md:flex"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> <button class="inline-flex items-center rounded bg-black px-3 py-2 text-white md:hidden">Menu</button> </nav>
响应式侧边栏：
<div class="flex flex-col gap-6 md:flex-row"> <aside class="md:w-64 md:shrink-0">Sidebar</aside> <main class="min-w-0 flex-1">Content</main> </div>
Flex 什么时候不如 Grid？
只关心一个方向的排列，用 Flex；同时关心行和列，优先 Grid。导航栏、按钮组、媒体对象、左右布局，用 Flex；商品列表、图片墙、仪表盘区域、表格式卡片布局，用 Grid。
常见坑包括：flex-1 子项长文本溢出时要加 min-w-0；items-center 看不出效果时先确认容器有没有高度；content-* 需要多行 Flex 才能体现；会换行的列表优先用 gap-*；shrink-0 用多了会造成横向滚动。
Tailwind 的 Flexbox 类可以按四类记：容器显示用 flex / inline-flex，方向用 flex-row / flex-col，整体对齐用 justify-*、items-*、content-*，子项伸缩用 flex-*、basis-*、grow、shrink、order-*、self-*。