17. Flexbox布局（一）：容器属性

本节目标：理解 Flexbox 容器的核心概念，学会用 Tailwind 工具类控制主轴方向、换行和对齐方式，能独立搭建常见的导航栏和居中布局。

Flexbox 是一维布局模型——它处理「行」或「列」其中一个方向上的排列，另一个方向跟着来。这跟 Grid 的二维同时控制不一样。实际项目中，导航栏、按钮组、卡片内部元素对齐，基本都是 Flexbox 的地盘。

启用 Flex 容器

给父元素加 flex 工具类（utility class），它的直接子元素自动变成 flex 项目（flex item）。

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

就这么简单。flex 对应 display: flex，子元素不再按块级流排列，而是沿主轴从左到右排成一行。

Note

如果只想让容器本身行为像 flex 但不独占一行，用 inline-flex。它对应 display: inline-flex，容器会像行内元素一样参与外部布局。

控制主轴方向：flex-direction

主轴方向决定了子元素排列的「走向」。Tailwind 提供四个类：

类名	CSS 值	效果
`flex-row`	`flex-direction: row`	水平从左到右（默认）
`flex-row-reverse`	`flex-direction: row-reverse`	水平从右到左
`flex-col`	`flex-direction: column`	垂直从上到下
`flex-col-reverse`	`flex-direction: column-reverse`	垂直从下到上

<div class="flex flex-col">
  <div>顶部</div>
  <div>中部</div>
  <div>底部</div>
</div>

Tip

我踩过的一个坑：用了 flex-col 之后，justify-content 和 align-items 的作用轴也跟着变了。justify-content 现在控制的是垂直方向，align-items 控制水平方向。脑子别转不过弯。

换行控制：flex-wrap

默认情况下，flex 项目会在一行内排不下就压缩自己。想让它们自动换行，用 flex-wrap：

类名	效果
`flex-nowrap`	不换行（默认）
`flex-wrap`	允许换行
`flex-wrap-reverse`	换行但顺序反转

<div class="flex flex-wrap">
  <div class="w-1/3">1/3 宽度</div>
  <div class="w-1/3">1/3 宽度</div>
  <div class="w-1/3">1/3 宽度</div>
  <div class="w-1/3">这行放不下了，换行</div>
</div>

实际场景中，商品列表、卡片网格经常用 flex-wrap 配合百分比宽度做响应式布局。

主轴对齐：justify-content

justify-content 控制项目在主轴上的分布方式。这是 Flexbox 里最常用的属性之一。

类名	效果
`justify-start`	靠主轴起点（默认）
`justify-end`	靠主轴终点
`justify-center`	居中
`justify-between`	两端对齐，中间均分
`justify-around`	每个项目两侧留白相等（边缘留一半）
`justify-evenly`	所有间距完全相等

<!-- 经典导航栏：logo 靠左，菜单靠右 -->
<div class="flex justify-between">
  <div>Logo</div>
  <nav>菜单项</nav>
</div>

<!-- 水平垂直居中 -->
<div class="flex justify-center items-center h-64">
  <div>我居中了</div>
</div>

Tip

justify-between 是导航栏布局的神器。第一个元素贴左边，最后一个贴右边，中间的内容自动均分空间。

交叉轴对齐：align-items

align-items 控制项目在交叉轴（垂直于主轴）上的对齐方式。

类名	效果
`items-start`	靠交叉轴起点
`items-end`	靠交叉轴终点
`items-center`	交叉轴居中
`items-baseline`	文字基线对齐
`items-stretch`	拉伸填满交叉轴（默认）

<div class="flex items-center h-32 bg-gray-100">
  <div class="h-8">矮的</div>
  <div class="h-16">高的</div>
  <div class="h-12">中等的</div>
</div>

所有子元素会在交叉轴方向居中对齐。

Warning

items-stretch 是默认值，但子元素如果设置了固定高度（如 h-16），拉伸就不生效了。这是很多人疑惑「为什么 stretch 没用」的原因。

内容整体对齐：align-content

当 flex 容器有多行（用了 flex-wrap）时，align-content 控制这些行在交叉轴上的分布。单行情况下这个属性不生效。

类名	效果
`content-start`	行靠交叉轴起点
`content-center`	行整体居中
`content-between`	行之间均分空间
`content-around`	行两侧留白
`content-evenly`	行间距完全相等

<div class="flex flex-wrap content-center h-64">
  <div class="w-1/3">行1-1</div>
  <div class="w-1/3">行1-2</div>
  <div class="w-1/3">行2-1</div>
  <div class="w-1/3">行2-2</div>
</div>

快速组合：水平垂直居中

最常用的布局模式之一，一行搞定：

<div class="flex justify-center items-center min-h-screen">
  <div>页面正中央</div>
</div>

justify-center → 主轴（水平）居中
items-center → 交叉轴（垂直）居中
min-h-screen → 容器至少占满视口高度

间距控制：gap

gap 属性设置 flex 项目之间的间距，比给每个子元素加 margin 干净得多。

<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

gap-4 对应 1rem（16px）。Tailwind 的间距刻度从 gap-0 到 gap-96，跟 padding/margin 共用一套间距比例。

也可以分别控制水平和垂直间距：

<div class="flex flex-wrap gap-x-8 gap-y-4">
  <!-- 水平间距 2rem，垂直间距 1rem -->
</div>

Note

v4 中 gap 已经完全稳定，不需要任何浏览器前缀。以前用 gap 还得担心兼容性，现在放心用。

本节小结

Flexbox 容器的核心工具类：

flex → 启用 flex 布局
flex-row / flex-col → 控制方向
flex-wrap → 允许换行
justify-* → 主轴对齐
items-* → 交叉轴对齐
content-* → 多行内容对齐
gap-* → 项目间距

下一节我们看 flex 项目自身的属性——flex-grow、flex-shrink、flex-basis 和 order，它们控制的是单个子元素的行为。