使用Flexbox的align-items: stretch可实现多列等高布局，父容器设display: flex，子列不设固定高度即可自动拉伸，两列内容无论长短均保持相同高度，适用于卡片、侧边栏等场景。
在CSS布局中，让多个列具有相同的高度是一个常见需求，尤其是在创建卡片、产品列表或侧边栏与主内容并排的布局时。使用Flexbox的 align-items: stretch 特性，可以轻松实现多列等高布局，无需JavaScript或固定高度。
基本原理：align-items 与 stretch
Flex容器默认的 align-items 属性值是 stretch，这意味着子元素（flex项目）在交叉轴上会自动拉伸以填满容器的最大高度。只要子元素没有设置固定高度或 align-self: flex-start 等覆盖行为，它们就会自动等高。
关键点：
- 父容器设置
display: flex - 确保子列未设置
height或min-height阻止拉伸 - 默认行为即为等高，无需额外设置
align-items: stretch（除非被覆盖）
实际代码示例
以下是一个两列等高布局的简单实现：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
gap: 16px; /* 列间距，推荐使用gap而非margin */
}
<p>.column {
flex: 1; /<em> 均分空间 </em>/
background-color: #f0f8ff;
padding: 20px;
border: 1px solid #ddd;
}
HTML结构：
<div class="container">
<div class="column">
<h3>短内容</h3>
<p>这一列内容较少。</p>
</div>
<div class="column">
<h3>长内容</h3>
<p>这一列有很多文字……</p>
<p>会撑高整个容器。</p>
<p>另一段。</p>
</div>
</div>
结果：两列高度相同，较短的一列也会被拉伸到与较高的一列一致。
注意事项与常见问题
虽然Flexbox等高布局非常方便，但需要注意以下几点：
-
避免给子列设置固定高度：如
height: 200px会阻止拉伸 - 图片或内嵌块元素可能影响布局：确保内部元素不会溢出或破坏弹性行为
-
使用 min-height 控制最小高度：可设置
min-height: 100px而不影响 stretch 行为 -
响应式场景下依然有效：在移动端堆叠排列时，可通过媒体查询改为
flex-direction: column
基本上就这些。用 Flexbox 实现等高列简单可靠，align-items: stretch 是默认行为，合理使用能省去很多麻烦。
