Tailwind CSS 布局：Flexbox

本篇在前几篇的基础上，讲解如何用 Tailwind CSS v4 的 Flexbox 工具类做布局。Flexbox 适合一维排列，比如导航栏、卡片列表、表单行这些场景。

认识 Flex 容器

要让一组元素变成弹性盒，先给父元素加 flex（块级弹性盒）或 inline-flex（行内弹性盒）。

<div class="flex">
  <div class="p-4 bg-blue-100">第一项</div>
  <div class="p-4 bg-blue-100">第二项</div>
  <div class="p-4 bg-blue-100">第三项</div>
</div>

inline-flex 的区别是它不会占满整行，宽度由内容决定，可以和其他行内元素并排。

主轴与交叉轴

Flex 有两条轴。默认情况下，主轴是水平方向（从左到右），交叉轴是垂直方向（从上到下）。后面的对齐工具类都是围绕这两条轴展开的。

对齐方式

主轴对齐

justify-* 控制子项在主轴上的位置。

<div class="flex justify-between">
  <div class="p-4 bg-green-100">左</div>
  <div class="p-4 bg-green-100">右</div>
</div>

交叉轴对齐

items-* 控制子项在交叉轴上的位置。

<div class="flex items-center h-24 bg-gray-100">
  <div class="p-4 bg-red-100">中间对齐</div>
  <div class="p-2 bg-red-100">短</div>
</div>

常用的还有 items-start（靠上）和 items-end（靠下）。如果子项本身设置了 height，交叉轴对齐会影响它的位置。

多行对齐

当子项换行后有多行时，用 content-* 控制多行在交叉轴上的分布，例如 content-start、content-center、content-between。它只在 flex-wrap 生效且出现多行时才有意义。

子项伸缩与排列

子项伸缩

flex-1 让子项自动占据剩余空间，flex-none 让子项保持自身宽度不被压缩。

<div class="flex">
  <div class="flex-none w-20 bg-yellow-100 p-4">固定</div>
  <div class="flex-1 bg-yellow-100 p-4">自适应</div>
</div>

间距与方向

gap-* 给子项之间加间距，比手写 margin 干净很多。

<div class="flex gap-4">
  <div class="p-4 bg-purple-100">A</div>
  <div class="p-4 bg-purple-100">B</div>
</div>

默认方向是 flex-row（横向）。改成纵向用 flex-col。

<div class="flex flex-col gap-2">
  <div class="p-4 bg-purple-100">上</div>
  <div class="p-4 bg-purple-100">下</div>
</div>

当一行放不下时加 flex-wrap 允许换行，结合 gap-* 就能做自适应卡片流。

实战：导航栏与卡片列表

下面用 Flexbox 搭一个顶部导航栏，再加一组会换行的卡片列表。

<nav class="flex items-center justify-between px-6 py-3 bg-white shadow">
  <span class="font-bold text-lg">我的网站</span>
  <div class="flex gap-4">
    <a class="hover:text-blue-600" href="#">首页</a>
    <a class="hover:text-blue-600" href="#">文章</a>
    <a class="hover:text-blue-600" href="#">关于</a>
  </div>
</nav>

<section class="flex flex-wrap gap-4 p-6">
  <div class="flex-1 min-w-40 p-4 bg-gray-100 rounded">卡片一</div>
  <div class="flex-1 min-w-40 p-4 bg-gray-100 rounded">卡片二</div>
  <div class="flex-1 min-w-40 p-4 bg-gray-100 rounded">卡片三</div>
</section>

导航栏用 justify-between 把 logo 和菜单分到两端，卡片列表用 flex-wrap 加 flex-1 实现自动换行的等宽卡片。

小结

Flexbox 的核心是先给父元素加 flex，再用 justify-* 和 items-* 分别控制主、交叉轴，最后用 flex-1、gap-*、flex-col、flex-wrap 调整伸缩与排列。下一篇讲二维布局利器 Grid。