18. Flexbox布局（二）：项目属性

本节目标：学会控制单个 flex 项目的伸缩、基础尺寸、对齐覆盖和排列顺序，能做出自适应宽度、固定侧栏等常见布局模式。

上一节我们学了容器属性，控制的是所有子元素的集体行为。但实际项目中，经常需要「这个元素固定宽度，那个元素自动填满剩余空间」——这就需要操作单个项目了。

flex 简写属性

Tailwind 提供四个类来设置 CSS 的 flex 简写属性：

类名	CSS 值	含义
`flex-1`	`flex: 1 1 0%`	可伸缩，基础尺寸为 0，常用
`flex-auto`	`flex: 1 1 auto`	可伸缩，基于内容自动
`flex-initial`	`flex: 0 1 auto`	不增长，可收缩，基于内容
`flex-none`	`flex: none`	完全不伸缩，保持原始尺寸

最常用的是 flex-1。它告诉这个项目：「基础大小无所谓，但给我吃掉所有剩余空间」。

<!-- 经典布局：侧栏固定，主内容自适应 -->
<div class="flex">
  <aside class="w-64 flex-none">侧边栏（固定 256px）</aside>
  <main class="flex-1">主内容（自动填满）</main>
</div>

Note

flex-1 和 w-full 不一样。flex-1 是 flex 项目特有的行为，它会让项目伸缩；w-full 只是简单地设成 100% 宽度，在 flex 容器中可能导致溢出。

flex-grow：控制增长能力

flex-grow 决定当容器有额外空间时，项目能「长」多少。默认值是 0，表示不增长。

类名	CSS 值
`grow`	`flex-grow: 1`
`grow-0`	`flex-grow: 0`

数值是比例关系。两个项目都是 grow，它们均分剩余空间；一个 grow 另一个 grow-0，前者吃掉全部。

<div class="flex gap-4">
  <div class="grow">我会增长</div>
  <div class="grow-0">我不会</div>
</div>

flex-shrink：控制收缩能力

当容器空间不够时，flex-shrink 决定项目能「缩」多少。默认值是 1，表示允许收缩。

类名	CSS 值
`shrink`	`flex-shrink: 1`
`shrink-0`	`flex-shrink: 0`

shrink-0 很实用——防止某个元素在窄屏幕上被压缩变形。

<div class="flex">
  <div class="shrink-0 w-48">我永远保持 48 宽度</div>
  <div class="flex-1">我负责伸缩</div>
</div>

Tip

图片在 flex 容器中容易被压扁。给图片的容器加 shrink-0，图片就不会变形了。

flex-basis：设置基础尺寸

flex-basis 是分配剩余空间之前，项目「声称」自己占多少空间。你可以理解为 flex 版的 width。

Tailwind 提供了两套 basis 命名：

固定间距值：

<div class="flex">
  <div class="basis-1/4">占 25%</div>
  <div class="basis-1/2">占 50%</div>
  <div class="basis-1/4">占 25%</div>
</div>

分数值：

basis-1/3、basis-2/3、basis-1/5 到 basis-11/12 都有。

<div class="flex">
  <div class="basis-1/3">三分之一</div>
  <div class="basis-2/3">三分之二</div>
</div>

还有 basis-auto（基于内容）和 basis-full（100%）。

Note

basis-* 和 w-* 的区别：basis 是 flex 专用的基础尺寸，会参与 flex 伸缩计算；w 只是简单地设置宽度，在某些 flex 场景下可能表现不一致。

align-self：覆盖容器的对齐

有时候你想让某个项目有不同于其他项目的对齐方式，用 align-self 覆盖容器的 items-* 设置。

类名	效果
`self-auto`	继承容器的 align-items
`self-start`	靠交叉轴起点
`self-end`	靠交叉轴终点
`self-center`	交叉轴居中
`self-stretch`	拉伸
`self-baseline`	基线对齐

<div class="flex items-center h-32">
  <div>居中（跟随容器）</div>
  <div class="self-end">我靠底部</div>
  <div>居中（跟随容器）</div>
</div>

order：改变排列顺序

order 让你在不修改 HTML 的情况下改变视觉顺序。默认值是 0，数值越小越靠前。

类名	CSS 值
`order-1` 到 `order-12`	对应数字
`order-first`	`order: -9999`（最前）
`order-last`	`order: 9999`（最后）
`order-none`	`order: 0`（默认）

<!-- HTML 顺序是 1-2-3，但视觉上 3 排第一 -->
<div class="flex">
  <div class="order-2">第一个 DOM，第二个视觉</div>
  <div class="order-last">最后一个</div>
  <div class="order-first">第一个视觉</div>
</div>

Warning

order 只改变视觉顺序，不改变 DOM 顺序。屏幕阅读器仍然按 DOM 顺序朗读。所以不要依赖 order 来做语义上的顺序调整。

实际应用：侧栏布局

把这些属性组合起来，做一个经典的两栏布局：

<div class="flex">
  <!-- 侧栏：固定宽度，不伸缩 -->
  <aside class="w-64 shrink-0 bg-gray-100 p-4">
    <nav>导航菜单</nav>
  </aside>
  
  <!-- 主区域：自动填满 -->
  <main class="flex-1 p-4">
    <h1>页面标题</h1>
    <p>页面内容...</p>
  </main>
</div>

关键就在 shrink-0 和 flex-1 的配合：侧栏不会随着窗口缩小而变形，主区域自动适应。

实际应用：底部操作栏

另一个常见场景——底部按钮组，一个靠左，一个靠右：

<div class="flex items-center p-4 border-t">
  <button class="text-gray-500">取消</button>
  <div class="grow"></div> <!-- 占位用的空元素 -->
  <button class="bg-blue-500 text-white px-4 py-2 rounded">确认</button>
</div>

用一个空的 grow 元素把两边撑开。或者更简单，用 ml-auto：

<div class="flex items-center p-4 border-t">
  <button class="text-gray-500">取消</button>
  <button class="ml-auto bg-blue-500 text-white px-4 py-2 rounded">确认</button>
</div>

Tip

ml-auto 在 flex 容器中特别好用，它让元素右侧的 margin 自动填满，相当于「推到你右边去」。

本节小结

flex 项目的核心工具类：

flex-1 / flex-auto / flex-none → 伸缩简写
grow / grow-0 → 增长能力
shrink / shrink-0 → 收缩能力
basis-* → 基础尺寸
self-* → 交叉轴对齐覆盖
order-* → 排列顺序

到这里 Flexbox 就讲完了。接下来是第 19 章——Grid 布局，二维世界的布局利器。