直接用display: flex就能实现自适应等高列，真正起作用的是flex交叉轴拉伸机制；不等高主因是align-items: stretch被height/max-height/min-height:0、父容器无高度基准、position: absolute脱离流或align-self覆盖所致。
直接用 display: flex 就能实现自适应等高列，盒模型本身不“实现”等高，而是配合 box-sizing: border-box 避免 padding/border 破坏视觉一致性——真正起作用的是 Flex 的交叉轴拉伸机制。
为什么加了 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或内容撑开
最容易被忽略的点是：等高列解决的是容器对齐，不是内容对齐。某列文字远多于其他列时，空白或滚动是正常现象——这时候该考虑 overflow: hidden、line-clamp 或 JS 截断，而不是反复调 flex 参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
