Flex布局下子列默认等高，因align-items: stretch是默认行为；不等高主因是父容器缺display: flex、子项设height/align-self、脱离文档流或overflow截断。
Flex 布局下，只要父容器设为 display: flex，子列默认就等高——不是“需要设置”，而是“不干预就会发生”。关键在于别无意中破坏它。
为什么加了 display: flex 还是不等高？
最常见原因不是写错了，而是布局上下文悄悄覆盖了默认行为：
- 父容器漏写了
display: flex（只写了flex-direction: column或justify-content不起作用） - 子项写了
height、max-height或align-self: flex-start，直接禁用align-items: stretch - 子项内部用了
position: absolute或display: table-cell，脱离文档流后不再参与交叉轴拉伸计算 - 父容器设置了
overflow: hidden且子项有margin-bottom，视觉上被截断，误以为高度不一致
align-items: stretch 生效的隐含前提
这个默认值看似简单，但依赖几个容易被忽略的条件：
- 父容器必须有可计算的高度：可以是显式
height，也可以由内容撑开；若父容器height: auto且所有子项都极短，拉伸仍发生，但“等高”效果不明显（因为整体高度由最高项决定） - 子项不能设
min-height: 0（旧版 Safari 中会触发 collapse，建议避免） - 推荐统一设
box-sizing: border-box，否则padding和border可能导致视觉高度偏差 - 列间距优先用
gap，而不是margin；后者在 flex 多行时易引发边缘错位
Flex 等高列 vs Grid 等高列：什么场景该换用 Grid？
当需求超出一维排列时，Flex 的“等高”就开始吃力：
立即学习“前端免费学习笔记（深入）”；
- 要同时控制行高和列宽（比如带页眉+侧边栏+主内容的响应式结构），
display: grid更自然 - 列数固定、结构清晰（如三列卡片区），
grid-template-columns: 1fr 1fr 1fr比flex: 1更可控 - 需支持 IE11 → 只能用 Flex（记得加
-ms-前缀） - 列内还要垂直居中文本 → Flex 子项再套一层
display: flex更直接；Grid 则需额外设display: flex或align-self
真正容易被忽略的是：等高列解决的是容器对齐，不是内容对齐。某列文字远多于其他列时，空白或滚动是正常现象——这时候得配合 overflow、line-clamp 或 JS 截断逻辑，而不是反复调 flex 参数。
