在网页排版中，经常遇到一行并排展示多个卡片或分栏模块的场景，例如商品列表、后台管理左侧菜单与右侧内容区。当这些子元素内部文字量不同，普通块级元素各自按内容撑开，底部就会参差不齐。CSS Flexbox提供了一套基于交叉轴的对齐机制，可以在不写任何脚本的情况下，让同一柔性行内的所有子元素自动保持高度一致，也就是常说的等高布局。
一、Flexbox等高布局的底层原理
Flexbox布局模型包含主轴和交叉轴两个方向。默认情况下，flex-direction为row，主轴是水平方向，交叉轴是垂直方向。容器上的align-items属性控制子项在交叉轴上的对齐方式，其初始值正是stretch。这意味着如果子项在交叉轴方向没有显式设置高度（或align-self覆盖），它们就会被拉伸至占满整行的最高子项高度，从而天然形成等高效果。
这种拉伸并不是通过JavaScript动态测量DOM高度再赋值，而是浏览器在柔性行（flex line）计算阶段，以该行最高子项的自然高度作为基准，将其余子项的 used cross size 直接扩充。因此性能开销极低，且能随内容变化、视口缩放自动重算。需要注意的是，一旦子项自身声明了height或min-height之外的固定高度，或者设置了align-self: flex-start等，就会脱离拉伸规则，等高被破坏。
从盒模型角度看，被拉伸的子项其content box高度增加，但padding和border保持不变，因此内部若使用百分比或flex嵌套，仍能正确继承外部高度。这也解释了为何在卡片内再嵌一层display:flex的容器，可以让文字区域与按钮区域进一步上下分布且整体不溢出。
二、常见实现方式与代码示例
最基础的等高布局只需要父容器开启flex，子项不写高度即可。以下代码展示三个卡片自动等高的情形：
<style>
.row {
display: flex;
align-items: stretch; /* 可省略，默认值 */
gap: 12px;
}
.card {
flex: 1;
background: #f5f5f5;
padding: 16px;
border: 1px solid #ddd;
}
</style>
<div class="row">
<div class="card">短内容</div>
<div class="card">这里是较长的内容，用来测试卡片是否会自动拉伸到与最短卡片相同的底部边缘位置。</div>
<div class="card">中等长度内容展示</div>
</div>
如果希望某一子项故意不等高，比如左侧固定高度的标签栏，可以单独设置align-self。但在多数后台系统中，我们反而需要左侧导航与右侧面板同高，此时不设置高度、保持stretch即可。当flex-direction改为column时，交叉轴变成水平方向，等高概念转为等宽，原理完全一致。
另一种进阶用法是在子项内使用margin-top:auto将底部元素推至最下，配合拉伸高度实现“卡片底部按钮对齐”。这在电商列表中极为实用：无论描述文字几行，购买按钮始终贴着卡片下边缘，视觉整齐。
三、与其他布局方案的对比及避坑要点
在Flexbox之前，开发者常用display:table-cell模拟等高，或借助JavaScript计算最大高度并赋给兄弟节点。表格布局语义错误且难以响应式换行；脚本方案则在窗口resize、字体加载完成后需反复重算，容易引发回流抖动。Flexbox用纯CSS解决，维护成本大幅下降。与CSS Grid相比，Grid的grid-auto-rows: 1fr也能等高，但Flexbox在不确定子项数量、需要动态增减时更为轻量。
实际项目中常见的坑是：给子项写了height:100%却忘记父容器本身在交叉轴并无确定高度，导致百分比失效；或是引入了第三方UI库，其卡片组件自带align-self:center覆盖了拉伸。排查时应在浏览器审查面板查看computed里的align-items与align-self最终值。此外，若父容器设置了flex-wrap:wrap，换行后的新行各自独立计算等高，不会跨行拉伸，这是符合预期的行为。
最后补充一点：在旧版IE中Flexbox支持残缺，若仍需兼容，可降级使用min-height配合overflow:hidden的伪等高技巧，但现代浏览器已无需此类hack。理解stretch机制后，绝大多数等高需求都能在十行CSS内稳妥解决。
Flexbox等高布局align-items修改时间：2026-08-15 08:18:25