直接用display: flex或grid即可实现等高，不等高主因是align-items: stretch被禁用：父容器无高度基准、子项设height/max-height/min-height: 0、position: absolute或table-cell脱离渲染流、align-self覆盖默认值。
直接用 display: flex 或 display: grid，99% 的场景下不需要 JS、不用 hack、不依赖内容长度。
为什么加了 display: flex 还不等高？
不是 Flex 不行，而是默认的 align-items: stretch 被悄悄禁用了：
- 子项写了
height、max-height或min-height: 0（尤其旧 Safari 下会触发 collapse） - 父容器没高度基准，子项又写了
height: 100%——此时百分比无从计算 - 子项内部用了
position: absolute或display: table-cell，脱离 flex 渲染流 - 子项显式设了
align-self: flex-start，覆盖了父级的stretch
box-sizing: border-box 是干啥的？
它不负责“让列等高”，而是防止 padding 和 border 把视觉高度撑开，导致明明拉伸了、看着却不对齐：
-
box-sizing: content-box：设height: 200px+padding: 20px→ 实际占高 240px - 改成
box-sizing: border-box：同一height: 200px包含padding，内容区自动压缩，总高就是 200px - 建议统一加在子项上：
.column { box-sizing: border-box; }，别只加在部分列里
Flex 多行时还等高吗？
只保证“同一行内”等高，换行后的新行高度由该行最高项决定，两行之间高度可以完全不同：
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap是一维布局的本质限制，不是 bug - 若需所有卡片严格等高（比如 3×3 网格），必须换用
display: grid+grid-auto-rows: 1fr - 响应式从 3 列变 1 列时，
flex-direction: column下align-items: stretch不再控制高度，得靠min-height或内容撑开
真正容易被忽略的是内容加载节奏：图片、异步文本、字体加载都会导致初始高度塌陷，哪怕用了 flex/grid，页面也可能先抖一下。加 min-height 占位或用 aspect-ratio 锁定卡片比例，比等高本身更影响体验。
