Flexbox通过display: flex和默认的align-items: stretch实现等高列布局，子元素自动拉伸至最高列高度，无需额外设置，简洁高效。
在网页布局中，多个列（column）高度不一致是个常见问题。当各列内容量不同，使用传统浮动或display: inline-block布局时，很难让所有列保持相同高度。Flexbox提供了一个简洁高效的解决方案——利用align-items: stretch特性实现等高列布局。
Flexbox默认拉伸子元素
Flex容器中的子元素（flex items）默认会沿交叉轴（cross axis）拉伸，前提是这些子元素没有设置固定高度或min-height覆盖该行为。
- 父容器设置
display: flex即可启用Flexbox布局 -
align-items: stretch是默认值，无需额外声明 - 所有子列将自动拉伸到最高列的高度
基本HTML结构示例
假设我们有两个并排的列，内容长度不同：
<div class="container"> <div class="column">短内容</div> <div class="column">长内容...（多行文本）</div> </div>
CSS只需简单设置：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
}
.column {
flex: 1; /* 均分宽度 */
padding: 20px;
background: #f0f0f0;
border: 1px solid #ccc;
}
此时两列视觉上高度一致，即使内容量不同。
注意事项与常见问题
虽然align-items: stretch很强大，但某些情况下可能失效：
- 子元素设置了
height或min-height，会阻止拉伸 - 内部块级元素（如图片、嵌套div）超出容器时，可能影响表现
- 老版本浏览器需考虑前缀兼容性（现代项目通常可忽略）
若发现未等高，检查是否有显式高度限制或内部溢出。
灵活控制对齐方式
虽然stretch是等高布局的核心，你也可以根据需要调整对齐：
-
align-items: flex-start：顶部对齐，取消拉伸 -
align-items: center：居中对齐，仍保持等高 -
align-items: baseline：基线对齐，适合文本场景
但在实现等高列时，保持默认stretch最直接有效。
基本上就这些。用Flexbox解决等高列问题，代码简洁且维护性强，已成为现代CSS布局的标准做法。不复杂但容易忽略细节。
