等高列是网页布局中历史悠久的需求。想象一个典型的三栏页面：左侧导航很短，中间文章很长，右侧广告栏内容也不固定。如果各列高度不一，页面底部会参差不齐，视觉上非常难看。在没有flex的时代，开发者只能用背景图伪装、超大负边加溢出隐藏（俗称圣杯布局的hack版本）或者干脆上JavaScript动态计算高度，这些方案要么维护困难，要么性能堪忧。而flex布局凭借其弹性盒模型的设计理念，让等高列变成了一行CSS声明的事。
flex实现等高列的核心原理
要理解flex为什么能天然实现等高列，需要先弄清楚伸缩容器的一个默认行为：align-items属性的默认值是stretch。这个值的含义是，当伸缩项目在交叉轴方向上没有显式设置尺寸时，容器会把这些项目拉伸到与容器在该方向上的尺寸一致。
换句话说，flex容器会先根据最高的那个子元素（或者容器自身设定的高度）确定整体高度，然后让所有子元素都拉伸到这个高度。这正好符合等高列的需求：不需要知道哪一列最高，浏览器自动帮你处理了。下面是最基础的实现代码：
<div class="container"> <div class="col">短内容</div> <div class="col">这里是一段很长的内容，占据了大量的垂直空间</div> <div class="col">中等长度的内容</div> </div>
.container {
display: flex;
}
.col {
flex: 1; /* 三列平分宽度 */
padding: 20px;
border: 1px solid #ccc;
}这段代码运行后，三个.col元素的高度会自动保持一致，边框的对齐效果一目了然。需要注意的是，stretch生效的前提是子元素没有设置height或者align-self。如果你发现某一列没有拉伸，首先检查是不是被内联样式或者某条CSS规则固定了高度。
常见变体的处理技巧
子内容在等高列中垂直居中
等高列实现后，新问题随之而来：短内容的那一列，内容都挤在顶部，下方留白很大。如果希望内容垂直居中，可以在子元素上再用一次flex：
.col {
flex: 1;
display: flex;
flex-direction: column; /* 变成纵向伸缩容器 */
justify-content: center; /* 内容垂直居中 */
}这种嵌套flex的写法在实际项目中极其常用，父级flex负责等高，子级flex负责内容对齐，职责清晰互不干扰。
固定侧边栏加自适应主内容
很多页面需要侧边栏固定宽度（比如240px的导航），主内容自适应剩余空间。这时不能给所有列都用flex: 1，而要区分处理：
.sidebar {
flex: 0 0 240px; /* 不放大、不缩小、基准宽度240px */
}
.main {
flex: 1; /* 占据剩余空间 */
}flex: 0 0 240px是flex-grow、flex-shrink、flex-basis三个属性的简写。第一个0表示即使容器有富余空间也不放大，第二个0表示空间不足时也不收缩，第三个值设定初始宽度。这样侧边栏宽度稳定，主内容弹性伸缩，且两列依然保持等高。
多行等高卡片布局
如果需要多行排列的等高卡片（比如商品列表），要加上flex-wrap并注意对齐方式：
.card-list {
display: flex;
flex-wrap: wrap; /* 允许换行 */
align-items: stretch; /* 显式声明，避免被覆盖 */
}
.card {
flex: 0 0 calc(33.333% - 20px);
margin: 10px;
}换行之后，align-items: stretch的作用范围变成了每一行内部，也就是说每一行的卡片等高，但不同行之间的高度可以不同。这正是大多数卡片列表想要的效果。
flex与其他等高方案的对比
除了flex，还有两类常见方案。第一类是旧的display: table布局，把容器设为表格、各列设为表格单元，也能实现等高，且在IE8等古老浏览器中可用。但表格布局的列宽分配不灵活，语义上也不适合做页面骨架，如今基本只在需要兼容极老浏览器时才考虑。
第二类是CSS Grid布局，通过grid-auto-rows: 1fr或者默认的拉伸行为同样可以实现等高，而且在二维布局、不规则网格场景下能力远强于flex。Grid的取舍在于心智模型不同：flex是一维的，适合一行或一列内的排布；Grid是二维的，适合整体页面骨架。
实际项目中的建议很直接：如果只是简单的等高列需求，flex方案代码量最少、浏览器支持完善（包括所有主流浏览器的当前版本），学习成本也低；如果布局复杂到需要行列同时控制，再升级到Grid。两者也可以混用，外层Grid搭骨架，内层flex做等高内容，各取所长。
踩坑提醒
最后补充几个容易翻车的细节。第一，等高列内部的margin不会参与拉伸计算，如果希望某列内部有间距，用padding更稳妥。第二，给伸缩容器设置align-items: center会破坏等高效果，因为它覆盖了默认的stretch，这一点在居中需求和等高需求同时存在时要特别注意，建议在子元素上用align-self单独控制。第三，如果等高列里放了图片，记得给图片设置max-width: 100%，避免图片撑破弹性布局。掌握这些细节后，flex等高列方案基本可以覆盖日常开发中的绝大多数场景。