Flex布局中等高列的核心是父容器设display: flex，子项默认align-items: stretch实现等高；横向布局时子项高度自动等高，纵向时宽度等宽；避免设置height、align-self等覆盖stretch行为。
Flex 布局中实现等高列非常简单，核心就是让容器启用 flex，并设置 align-items: stretch（这是默认值，通常无需显式书写）。
确保父容器是 flex 容器
给父元素设置 display: flex 或 display: inline-flex，子元素就会自动成为 flex 项。此时只要子项没有设置固定高度、min-height 或 align-self 覆盖，默认就会被拉伸填满容器高度。
- 横向布局（主轴为 row）：子项高度自动等高
- 纵向布局（主轴为 column）：子项宽度自动等宽（对应 stretch 的横向表现）
- 若子项设置了
height、max-height或align-self: flex-start等，会覆盖 stretch 行为
常见写法示例
HTML 结构：
<div class="container"><div class="col">内容A</div>
<div class="col">内容B
换行了
而且更多行</div>
<div class="col">内容C</div>
</div>
CSS：
立即学习“前端免费学习笔记（深入）”；
.container {display: flex;
/* align-items: stretch; ← 默认即如此，可省略 */
}
.col {
padding: 1rem;
background: #f0f0f0;
/* 不设 height / min-height / align-self，保持 stretch */
}
注意兼容性和干扰项
虽然 align-items: stretch 是 flex 默认行为，但实际不等高的常见原因有：
- 父容器没设高度，且子项内容高度不一致 → flex 容器高度由最高子项撑开，其余自然拉伸，仍等高；但如果父容器被限制（如
max-height），需检查是否触发了收缩 - 子项内使用了
display: table-cell或绝对定位脱离文档流，可能影响 stretch 效果 - 旧版 Safari 对
min-height: 100%在 flex 子项中支持不佳，建议避免混用 - IE10–11 需要加
-ms-flex-align: stretch兼容（若需支持）
需要等高但又想控制最小高度？
可以安全地给子项加 min-height，stretch 仍生效（只要内容没超过该值）；若内容超了，子项会自动增高，其他列也会同步拉高 —— 这正是等高列的预期行为。
- ✅ 推荐：
min-height: 100px（保底高度，不破坏等高） - ⚠️ 小心：
height: 200px（强制固定高度，会切断 stretch） - ✅ 安全：
align-self: stretch（显式重申，增强可读性）
