CSS3 Flex Box 布局从原理到实战：告别浮动，彻底解决垂直居中与等分布局

这段时间一直在重构之前的一个老管理后台，翻到早期页面的时候，我差点没认出来那是我自己写的代码：满屏的 float: left、无休止的 clearfix、为了垂直居中套了三层父元素、按钮等宽分布靠手算百分比……说实话，看到这些我一点都不怀念。我真正意识到 CSS3 弹性盒子（Flex Box）改变了整个布局思路，是那次我用不到十行 Flex 相关代码替换掉原来一百多行浮动和 hack 的时候。这篇文章不是属性手册的搬运，而是我想把从原理到实战、再到各种诡异坑位的一整套经验完整讲透。不管你是刚开始接触 Flex Box 的新手，还是已经用了很久但偶尔会被 flex-shrink 和 min-width 折磨的开发者，这篇文章都值得看完。

1. 为什么满大街都在谈 Flex Box：传统布局模式的三宗罪

很多教程上来就列属性，说 Flex Box 很好用，但很少有人认真讲清楚：它到底解决了什么痛点，让那么多前端开发者用过一次就回不去了。我先把当年那些布局方式的苦水倒一倒，你就能理解 Flex Box 为什么能成为现代布局的地基。

1.1 用浮动排版的隐痛

浮动（float）最早的设计目的是图文绕排，就是让文字环绕在图片周围，像报纸排版那样。结果早期没有更好的方案，大家硬是拿它来搭整个页面骨架，于是诞生了一堆根本不合理的代码习惯。

浮动元素会脱离正常文档流，父容器如果不做处理，子元素全部浮起来之后高度直接塌成 0。为了撑起父容器，我们要么在后面加一个"清除浮动"的空元素，要么给父元素加上 overflow: hidden，要么用经典的 ::after 伪元素写 clearfix。每个项目都要复制这段代码：

.clearfix::after { content: ""; display: block; clear: both; }

这还只是开始。浮动元素的宽度计算很敏感，两栏布局里左边固定 200px，右边想填满剩余空间，通常要配合 calc(100% - 200px)，再小心翼翼地处理 padding 和 border，稍不留神就溢出换行。想要浮动元素垂直居中？对不起，做不到。想要两栏等高？浮动更是直接绕道走。这些痛点叠加在一起，让"搭布局"这件事变成了"和浏览器斗智斗勇"。

1.2 垂直居中难到发指的年代

在 Flex Box 普及之前，前端社区流传着一个段子："垂直居中"是 CSS 里最大的难题。这不是夸张，是真的难。

我当时最常用的方案有三套：表格 cell 法、绝对定位法、line-height 法。表格 cell 法是模拟 table 的 vertical-align，但需要额外包一层，而且对 HTML 结构有侵入性；绝对定位法需要知道元素的宽高，才能用 top: 50% 再 margin 负值回拉，一旦内容变成动态的、高度未知，这招就废了；line-height 只对单行文本有效，多行文本直接走样。

/* 绝对定位法，要求已知宽高 */ .modal { position: absolute; top: 50%; left: 50%; width: 400px; height: 200px; margin-top: -100px; margin-left: -200px; }

这套写法的问题在于：只要内容变多、弹窗高度变成自适应，就得回去改 margin-top。更难受的是，同一个页面里可能有十几种不同尺寸的内容块需要居中，用传统方案你得给每个尺寸单独写一套偏移样式。而在 Flex Box 里，居中就是一个属性组合的事，后面我会专门讲。

1.3 等高分栏与等宽排列的荒谬做法

传统布局里还有两个需求让人头疼：等高分栏和等宽排列。

等高分栏，就是三栏内容高度不一致，但背景色和底边框要始终保持一样高。早期解决方案非常反直觉：用 margin-bottom: -9999px + padding-bottom: 9999px 这种"负 margin 伪等高"技巧，靠超大数值的间距把背景色撑出去，再用容器 overflow: hidden 截断。这方法看着聪明，实际上非常脆弱，一旦容器需要显示滚轮，背景色就可能被截出问题。

等宽排列更难。比如四个按钮要均分一整行宽度，以前的写法是先算百分比：25%、25%、25%、25%，然后还得处理四个按钮之间的间距。如果间距是 20px，那每个按钮实际宽度要改成 calc(25% - 15px)，最后一个还不能加右边距，否则整行会溢出。这还没完，如果按钮数量是动态的，比如后台管理界面里权限按钮有时 3 个有时 5 个，你得重新算一遍。Flex Box 出现之后，这类问题一句话就解决了。

1.4 Flex Box 改善的其实是"布局思维"

说了这么多痛点，我想表达一个核心观点：Flex Box 带来的不是某个属性的修补，而是一整套布局思维的转变。

在传统块级布局里，我们面对的是文档流，元素从上到下排列，宽度、高度、浮动、定位全靠自己声明，浏览器就是个照章办事的搬运工。而在 Flex Box 里，我们面对的是主轴和交叉轴两条轴，你告诉容器"项目往哪个方向排、剩余空间怎么分配、超出之后换不换行、项目在两条轴上分别怎么对齐"，剩下的计算全部交给浏览器。

这就是为什么很多人上手 Flex Box 之后会有一种"如释重负"的感觉：你不再需要精确计算每个盒子的尺寸，只需要描述布局意图，浏览器会帮你把数学题做完。理解到这一层之后，再去看那些属性，就不是死记硬背，而是一套有逻辑的体系了。

2. 先把两条轴线掰扯清楚：主轴与交叉轴的底层逻辑

Flex Box 整个体系的根基就是两条轴：主轴（main axis）和交叉轴（cross axis）。官方文档里画了很多图，但我觉得很多人没真正理解这两条轴的关系。我试着用最直白的方式讲清楚。

2.1 主轴：由 flex-direction 一锤定音

主轴的排布方向由容器上的 flex-direction 属性决定，它一共有四个值：

• row：主轴从左到右，这是默认值
• row-reverse：主轴从右到左
• column：主轴从上到下
• column-reverse：主轴从下到上

主轴决定了项目沿着哪个方向排成一列，也决定了主轴起点（main start）和主轴终点（main end）在哪里。比如 row-reverse 不仅让项目顺序反转，起点也变成了视觉上的右侧，第一个项目会从右边开始排。

这里有个常见误区：很多人以为 column 就是把 row 转 90 度那么简单，其实不完全是。column 模式下，项目的宽度不会自动变成 100%，它的交叉轴方向变成了水平方向，所以水平对齐要靠 align-items（后面会讲）。方向一变，你脑子里的坐标系就得跟着变。

2.2 交叉轴：永远与主轴垂直

交叉轴就是与主轴垂直的那条轴。主轴是 row 时，交叉轴是垂直方向，从上到下；主轴是 column 时，交叉轴是水平方向，从左到右。两个轴一横一竖，构成了 Flex 布局的坐标系。

理解这条轴的实战意义在于：你会发现很多属性是"跟着轴走"的。例如 justify-content 管的是主轴方向的项目分布，align-items 管的是交叉轴方向的对齐。如果你把 flex-direction 从 row 改成 column，那么原来的"水平居中"需求可能要从 justify-content 变成 align-items，这正是新手最容易搞混的地方。

2.3 用"排队"和"列队"理解两组对齐属性

抽象概念讲多了容易绕，我用一个生活场景来对应。

把主轴方向想成一条排队的通道，所有的项目就是在通道里排队的人。justify-content 管的是整条队伍在通道里的分布方式：队伍靠左站（flex-start）、靠右站（flex-end）、站在正中间（center）、第一个人顶着左边最后一个人顶着右边然后中间均匀散开（space-between）、每个人前后间距相同（space-around）、所有间距完全相等（space-evenly）。

交叉轴方向则可以理解成每个人在自己的"站位"上怎么站：align-items 决定他们是头顶对齐（flex-start）、脚底对齐（flex-end）、中心对齐（center）、还是把身高拉满填满整个站立区（stretch）。在 Flex 里，stretch 是 align-items 的默认值，这解释了为什么很多子元素在没有显式设置高度时会被拉成和容器一样高——我们站在队伍里默认就是要"站满"的。

2.4 两条轴的本质：从"盒子思维"到"轴线思维"

我见过不少人学 Flex Box 已经能写代码了，但遇到复杂需求还是犯懵，根本原因是思维还停留在"这个盒子应该多宽、多高"上。Flex 布局真正要求你的，是把问题翻译成"项目在主轴和交叉轴上分别怎么放"。

举例来说，以前做两栏布局，你会想"右边这栏到底该占多宽，减去左边宽度之后还剩多少"。改成 Flex 思维之后，你会想"右边这栏占满主轴上的所有剩余空间"。前者是精确计算，后者是声明意图，浏览器的计算引擎帮你搞定一切。这个思维转换一旦完成，再回来看 Flex 的属性，每一个都不会觉得突兀，因为它们本质上是同一套坐标系下对"排布、分配、对齐"三个问题的回答。

3. 容器上的六大开关：direction、wrap、justify-content、align-items、align-content、gap

Flex 布局中，写在容器上的属性决定了整个布局框架。这里我按实际使用频率和对布局效果的影响来逐个拆解。

3.1 flex-direction：方向定错，后面全白搭

flex-direction 是布局方向的总开关，我在实际项目里遇到过很多次"为什么 justify-content: flex-end 没生效"的疑问，一看代码，容器设置了 column，主轴已经变成垂直方向了，flex-end 自然就作用到垂直方向上了。

所以在写容器样式之前，先问自己一句：这一组项目是要横着排还是竖着排？横着排用 row 系列，竖着排用 column 系列。reverse 系列一般用于某些特殊 UI，比如列表从底部往上弹，或者处理阅读顺序与视觉顺序不一致的需求。正常情况下我不会主动推荐 reverse，因为它会同时改变主轴起点，视觉顺序和 DOM 顺序不一致时，容易给后续维护埋坑。

3.2 flex-wrap：默认不换行，空间不够就压缩

Flex 容器默认 flex-wrap: nowrap，意思是所有项目挤在一条轴线上，哪怕容器的宽度不够，也不会自动换行，而是触发 flex-shrink 让项目收缩。

很多时候我们期待的是"一行放不下就换行"，比如商品卡片列表、标签组、图片墙。这种场景必须显式加上 flex-wrap: wrap。加上之后，项目才会在主轴放不下的情况下折行，形成多行的效果。

一个容易混淆的点是：flex-wrap 和 flex-shrink 都会在空间不足时做出反应，但二者是两套逻辑。flex-shrink 是在不换行的前提下把项目压缩，flex-wrap 是允许项目换到新的一行。两者可以同时存在，但你要清楚自己想要的是"压缩"还是"折行"。像标签云、搜索历史这种内容，我不建议让它们 shrink，因为紧凑的压缩会让内容难读，直接 wrap 反而更自然。

3.3 justify-content：主轴空间怎么分，分给谁

justify-content 控制项目在主轴上的分布方式。我列一个对照表，把几个值的使用场景一次说清：

用的时候有个小经验：如果两端的间距表现和中间不一致，多半是选错了上面某个值。真正常用的其实就 flex-start、flex-end、center、space-between 几个，space-around 和 space-evenly 偶尔用在图标、按钮组的均分上。

3.4 align-items：交叉轴上的起点终点与拉伸

align-items 默认值是 stretch，这是我在代码审查里见过最多误会的地方。因为默认是 stretch，所以只要子项目没设置高度，它们就会被拉成容器交叉轴的高度。比如一个容器里有文字又有图片，你没有给文字标签设置 height，它会被拉高，导致行高表现异常。

其他四个常用值：

• flex-start：项目贴交叉轴起点，也就是行首
• flex-end：项目贴交叉轴终点
• center：项目在交叉轴方向居中
• baseline：项目按第一行文字的基线对齐，常用于多行文字和图标混排

baseline 是一个被低估的值。有些排版场景下，多个带不同字号或不同 padding 的元素，如果用 flex-start 或者 center，文字的底线会参差不齐，而 baseline 会让它们像印刷体一样对齐在同一条基线上，观感会精致很多。

3.5 align-content：多行项目才有的对齐方式

align-content 是很多人完全不用的属性，因为它只在 flex-wrap: wrap 并且实际产生了多行时才生效。它作用的对象是"多行整体"而不是"单个项目"。可以把它理解成交叉轴方向上的 justify-content：当有多行项目时，这些行在交叉轴方向上怎么分布，由 align-content 控制。

注意区分 align-items 和 align-content：align-items 控制的是每一行内部项目的对齐方式，而 align-content 控制的是行与行之间在交叉轴方向上的分布。当只有一行项目时，align-content 不生效，你必须用 align-items。当有多行项目且容器高度超过内容总高度时，align-content: center 可以让整个多行内容整体垂直居中，这是很多新手想实现而不得其法的需求。

3.6 gap：给项目间距，别再逐项加 margin

在 Flex 布局里设置项目间距，以前的标准做法是给项目写 margin，然后处理第一个和最后一个多余边距。用 :first-child 和 :last-child 去清零，或者给容器加负 margin，这些都是权宜之计。

现在主流浏览器都支持了 gap、row-gap、column-gap，直接写在容器上就行：

.container { display: flex; flex-wrap: wrap; gap: 16px 24px; }

上面这行代码表示行间距 16px，列间距 24px。gap 的好处是不会额外占用项目自身的空间，而且不会在容器边界产生多余的边距。从 2021 年以后，gap 在 Flex 布局里的兼容性已经足够好了，我在新项目里会直接使用，不再维护一堆 margin 清零的兼容代码。

4. 项目身上的微操按钮：flex-basis、flex-grow、flex-shrink 与 flex 速记

容器属性定义了框架，项目属性则负责回答"单个项目在这个框架里怎么伸缩"。这部分是 Flex Box 里最容易被忽略、却是最能发挥威力的地方。理解了 flex 的实现逻辑，你就再也不会被"为什么这个元素被压扁了"这种问题困扰。

4.1 flex-basis：项目的基本尺寸基准

flex-basis 定义的是项目在主轴方向上的"基准尺寸"。在 row 模式下，它决定的是项目的基础宽度；在 column 模式下，它决定的是项目的基础高度。

它有三个典型取值：

• auto：基准尺寸取项目自身的 width 或 height，如果没有设置则取内容尺寸
• 固定值：比如 200px、30%，项目优先按这个值作为基准
• 0：基准尺寸为 0，完全忽略项目自身的 width

这里有一个重要特性：当 flex-basis 设置了具体数值（非 auto）时，它的优先级高于 width 属性。也就是说，如果你同时写了 width: 300px 和 flex-basis: 200px，在 Flex 布局中实际起作用的基准是 200px。遇到"为什么 width 不生效"的问题时，先怀疑一下是不是 flex-basis 在作怪。

4.2 flex-grow：剩余空间的分配逻辑

flex-grow 默认值是 0，表示项目不放大。当所有项目的 flex-grow 之和小于 1 时，会有部分剩余空间留在容器里；当总和大于等于 1 时，剩余空间会被全部瓜分。

它的计算公式是这样的：每个项目分配到的额外空间 = 剩余空间 ×（该项目 flex-grow 值 ÷ 所有项目 flex-grow 值之和）。

举个例子：容器宽度 600px，三个项目 flex-basis 都是 100px，那么剩余空间是 300px。如果三个项目的 flex-grow 分别是 1、2、1，那么它们分别分到 300 × (1/4) = 75px、300 × (2/4) = 150px、75px，最终宽度是 175px、250px、175px。

很多人误以为 flex-grow 是"宽度比"，其实只有当所有项目 flex-basis 都为 0 时，flex-grow 的比值才恰好等于最终尺寸的比值。所以如果你想实现三个项目按 1:2:1 的比例分配容器宽度，正确的写法是给所有项目设置 flex-basis: 0，再配 flex-grow: 1、2、1。如果不把 basis 清零，最终结果会受到内容宽度影响。

4.3 flex-shrink：空间不足时谁先缩

flex-shrink 默认值是 1，表示空间不足时项目允许收缩。它的计算逻辑比 grow 更反直觉，因为它的权重需要乘以 flex-basis。

flex-shrink 的计算公式是：每个项目需要缩减的量 = 溢出空间 ×（该项目 flex-basis × flex-shrink 值）÷（所有项目 flex-basis × flex-shrink 值的加权和）。

我举一个具体例子：容器宽度 300px，三个项目 flex-basis 都是 200px，总和 600px，溢出 300px。三个项目 flex-shrink 为默认的 1 时，加权值分别为 200、200、200，总和 600。每个项目缩减 300 × (200/600) = 100px，最终宽度都是 100px。

如果把第二项的 flex-shrink 改为 2，那么加权值变成 200、400、200，总和 800。缩减量分别为 300 × (200/800) = 75px、300 × (400/800) = 150px、75px，最终宽度为 125px、50px、125px。可以看到 flex-shrink 值大，不代表缩减量线性变多，而是"缩减量按加权比例分配"。这就是为什么当你设置 flex-shrink: 0 时，该项目完全不会被压缩，其他项目则会承担全部溢出缩减。

4.4 速记 flex: 1、flex: auto、flex: none 的真实含义

实际开发中，很少会分开写 grow、shrink、basis，而是用 flex 速记。我整理了最常用的几个速记值，对照关系如下：

我在项目里的习惯是：单侧栏固定、另一侧自适应时，自适应一侧直接写 flex: 1；等宽分布的子项，全部写 flex: 1；需要完全按内容排布、不参与伸缩的标签，写 flex: none。

需要注意 flex: 1 的 basis 是 0%，这是一个很关键的行为。它意味着项目忽略自身内容宽度，完全基于容器空间来平均分配。如果你的项目里有长文本，直接 flex: 1 可能会导致内容被强行压缩换行，这时需要考虑 min-width 的处理，我留到踩坑部分详细讲。

4.5 order 与 align-self：布局边缘的微操

order 属性可以改变项目在视觉上的排列顺序，默认值都是 0，数值小的排在前面。比如商品列表里要突出某个主推商品，可以给它 order: -1，让它排到最前面，而不需要改 DOM 结构。

不过要提醒一点：order 改变的是视觉顺序，不是 DOM 顺序，对键盘导航和屏幕阅读器用户来说，实际的焦点顺序仍然是按 DOM 来的，这会导致读屏顺序和看到的不一致。如果是为了交互体验调整顺序，我会优先考虑修改 DOM 结构；如果只是纯视觉层面的装饰性排序，order 可以用。

align-self 则允许单个项目覆盖容器上的 align-items 设置。比如容器整体 align-items: center，但最后一个按钮希望贴着底部，一个 align-self: flex-end 就搞定了，不需要为了它再套一层容器。

5. 实战对照：Flex Box 终结的四种经典布局方案

理论讲得再多，不如直接看代码落地。我从真实项目里挑出四类最常见的布局需求，把 Flex Box 写法和传统写法做一个对比，你会更直观地感受到这套体系的价值。

5.1 垂直水平居中的一劳永逸写法

垂直居中这个老大难问题，在 Flex Box 里的解法非常干净：

.wrapper { display: flex; justify-content: center; align-items: center; }

不管里面是一个 100px 的小图标，还是一段高度不定的动态内容，这两行都能让它既水平居中又垂直居中。而且不需要知道子元素的高度，也不需要给它设置任何偏移量。遮罩层、加载动画、空状态提示，我都用这套写法，从没翻过车。

还有一种隐藏玩法：容器设置 display: flex，子元素设置 margin: auto，也能实现居中。这个写法在某些嵌套场景下有用，因为 margin: auto 在 Flex 布局里会吸收项目在对应方向上的所有剩余空间。比如一个侧边栏布局，主内容区要水平居中，其他区域要保持原有排布，直接在目标元素上写 margin: auto 就行，不必对容器动刀。

5.2 两栏自适应布局：侧栏固定，主内容撑满

后台管理系统最常见的布局：左侧固定宽度菜单，右侧内容区填满剩余宽度。用 Flex Box 写起来非常直接：

.layout { display: flex; min-height: 100vh; } .sidebar { flex: 0 0 220px; } .main { flex: 1; min-width: 0; }

侧栏 flex: 0 0 220px 表示固定宽度 220px，既不放大也不缩小；主内容 flex: 1 填满剩余空间。没有浮动，没有清除浮动，没有 calc 计算，也不存在侧栏和主内容高度不齐的问题，因为 align-items 默认 stretch 会让两者天然等高。

这里我给主内容加了一个 min-width: 0，很多人可能不理解。它的作用是防止主内容里的长文本或表格把 Flex 项目撑破。如果不加，当内容宽度超过可用空间时，flex: 1 的项目会因为隐式最小尺寸（min-width: auto）而无法收缩到预期宽度，最终导致布局溢出。

5.3 三栏等高布局：Flex 下的等高是天然的

传统的三栏等高布局要靠负 margin 伪造，或者靠背景平铺，而在 Flex 容器里，等高是一个默认行为，不需要任何额外处理：

.columns { display: flex; align-items: stretch; } .column { flex: 1; }

三个栏目无论内容多长，它们的高度都会自动撑满容器，而容器的高度又由最高的一栏决定。这样每栏的背景色或边框底部都会齐平，视觉上干净利落。这个特性在卡片列表、数据概览、仪表盘分区里尤其好用。

5.4 导航栏与按钮组：均分、换行、顺序调整

导航栏是一个 Flex Box 高频场景。典型的顶部导航有两种需求：一是左右分布，品牌在左边，菜单在右边；二是多个菜单项均分整行。

左右分布可以这样写：

.nav { display: flex; align-items: center; } .nav .menu { display: flex; gap: 24px; margin-left: auto; }

menu 组用 margin-left: auto 吸走左侧剩余空间，实现自动推到右侧，不需要单独包裹浮动层。

均分按钮组更简单，给所有按钮 flex: 1 即可平均分配宽度；在移动端希望按钮换行时，给容器加 flex-wrap: wrap，按钮再加 min-width 控制换行断点。比如按钮在 480px 以下每行两个，可以写 flex: 1 0 45%，折行后自动均匀排成两列。Flex Box 把这种响应式变化变成了属性调整，不再需要反复计算百分比。

5.5 移动端卡片流：wrap 加 space-between 的黄金组合

移动端首页最常见的卡片列表，用 Flex Box 实现起来非常顺手：

.card-list { display: flex; flex-wrap: wrap; gap: 16px; } .card { flex: 1 1 280px; max-width: 360px; }

每一张卡片基础宽度 280px，空间充足时可以长到 360px，空间不足时自动换行。gap 负责统一间距，不需要再为 margin 和负 margin 操心。这种写法相比传统 float 加百分比的方式，最大的优势是"内容驱动换行"：卡片数量变化、容器宽度变化，布局都会自动适配，不需要写一堆断点。

6. 我在项目中踩过的 Flex Box 的坑（附兼容性速查）

Flex Box 用起来爽，但坑也不少。很多坑不是属性本身的问题，而是属性之间的相互作用超出了直觉。我把这些年踩过的、以及帮别人排查过的典型问题整理在这里，这些经验是文档里不会写清楚的。

6.1 flex-basis 与 width 同时设置，到底听谁的

前面提到过，flex-basis 的优先级高于 width（在取值非 auto 时）。这个规则看起来简单，但实际代码里经常会引发奇怪的问题。

有一个真实场景：某张卡片设置了 width: calc(33.33% - 20px) 作为三列布局的宽度，被同事改成 flex 布局之后，忘了删掉原来的 width，只加了 flex: 1，期望是自适应分配。结果卡片宽度还是按 33.33% 走，因为 flex: 1 的 basis 是 0%，按理说应该忽略 width，但这里因为卡片本身有内容宽度，min-width: auto 又把项目撑回到了内容宽度附近，最终表现出"看起来 width 生效了"的假象。排查时我一度很困惑。

这类问题的最好处理方式就是：代码里只保留一套尺寸定义。要使用 Flex 分配空间，就清理掉多余的 width；要依赖 width 控制尺寸，就写 flex: none。两者同时存在，要么是维护者没意识到优先级，要么是故意为之但没写注释，无论哪种都是隐患。

6.2 min-width: auto 这个隐式默认值是怎么坑我的

Flex 项目默认的 min-width 是 auto，也就是说它不允许被压缩到小于内容的最小宽度。这个设计对一般内容很友好，但对长文本、长链接、长英文单词来说就是灾难。

举个例子：一个 flex: 1 的详情区域里放了一长串 URL，或者一个超长的英文单词，由于 min-width: auto，这个项目无论如何都不会被压缩到比这个单词的宽度还窄，于是整个布局被撑破，后面几列被挤到旁边。

解法是给这个项目加上 min-width: 0，或者在项目内部设置 overflow: hidden 或 overflow-wrap: break-word。这里有个规律：凡是"flex 项目内部出现了文本溢出、布局被撑破"的问题，十有八九是 min-width: auto 在作怪。我给团队写规范的时候，会把 min-width: 0 列为 Flex 自适应性布局项目的默认选项，除非你明确知道内容一定很窄。

6.3 高度 stretch 引发的那次布局事故

align-items 默认是 stretch，这在很多场景下是好事，但有一次我在做一个表单页时被它坑过：表单项的右侧有一个提示图标，我原本只想让图标和输入框顶对齐，结果因为容器默认 stretch，图标被拉到了一个和输入框等高的高度，视觉上出现了一大片空白区域，点击区域也变得异常大。

排查过程很顺利，因为我知道默认值就会这么干，马上给图标设置了 align-self: flex-start 就解决了。我想说的是：当你发现某个元素"莫名其妙变高了"时，第一反应应该检查它所在的 Flex 容器有没有显式设置 align-items。stretch 这个东西，默认生效，但它并不总是你想要的。

6.4 margin: auto 在 Flex 布局里的隐藏用法

margin: auto 在 Flex 布局中是一个隐藏神器。它不仅能实现居中，还能实现分组布局中的"自动推挤"。

比如顶部导航左边是 logo、中间是搜索框、右边是用户信息，如果我不想给中间元素单独设置宽度或 flex-grow，最简单的方式是给中间的搜索框加上 margin-left: auto 和 margin-right: auto，它会自动把两侧剩余空间平分，让搜索框稳稳待在中间。右边同理，给用户信息写 margin-left: auto 就能把它推到最右边。

这个技巧的底层原理是：Flex 布局中，auto 方向的 margin 会吸收该方向上的所有剩余空间。多个 auto margin 会平分剩余空间，所以左右 auto 导致居中，单侧 auto 导致整体靠边。理解了这一点，你再也不需要为"推挤"单独包容器了。

6.5 兼容性速查与降级策略

虽然现在已经是现代浏览器的时代，但依然有企业客户跑在老旧系统上，兼容性仍然值得说明。

我的降级策略分两步。第一步，构建工具里加 Autoprefixer，自动补全 -webkit- 和 -ms- 前缀。第二步，对关键布局页面写一个回退方案：用 float 加宽度百分比做基础布局，然后用 @supports 检测浏览器是否完整支持 Flex 的某个关键属性，支持则覆盖成 Flex 布局：

.layout { display: block; } .layout .sidebar { float: left; width: 220px; } @supports (display: flex) { .layout { display: flex; } .layout .sidebar { float: none; width: auto; } }

这个方法能保证老浏览器看到的是一个还能用的布局，现代浏览器则享受到 Flex 的完整特性。对于绝大多数项目来说，做到这个程度已经足够了。

6.6 最后说点实在话

Flex Box 学了这么多年，我的核心体会其实就一句话：先画轴，再写属性，最后再去跟浏览器要结果。

每次搭一个 Flex 布局，我都会先问自己两个问题。主轴方向是什么？项目换不换行？想清楚这两点，哪个属性管哪条轴，就全清楚了。其次，写项目尺寸时坚持用 flex 速记，哪怕只写一个 flex: 1 或者 flex: none，都比只写 flex-grow 缺失另外两个属性更可控。第三，遇到任何"这个元素为什么被撑破/压扁/不换行"的诡异问题，检查顺序永远是 min-width、flex-shrink、flex-basis 这三个，绝大多数坑都藏在这里面。

Flex Box 足够好用，但它也不是万能的。真正复杂的不规则二维布局，要交给 CSS Grid；一维的、线性的、需要灵活分配空间的场景，Flex Box 是最趁手的工具。把这两件事分清楚，你的 CSS 布局水平会再上一个台阶。