display: flex是实现多栏等高最直接可靠的方式，因align-items: stretch默认拉伸子项；失效主因是子项设height/max-height、父容器缺高度基准、子项脱离文档流或align-self覆盖默认行为。
display: flex 是目前实现多栏等高布局最直接、最可靠的方式；display: table-cell 虽能强制等高，但属于表格渲染模型，不是现代语义化布局的推荐方案。
为什么 display: flex 默认就等高，但你常看不到效果
因为 align-items: stretch 这个默认行为极易被覆盖或阻断：
- 子项写了
height、max-height，或旧 Safari 下写了min-height: 0（会直接禁用拉伸） - 父容器没设高度基准，子项又写了
height: 100%——此时百分比无法计算，拉伸机制失效 - 子项内部用了
display: table-cell、float或position: absolute，导致脱离 flex 渲染流 - 父容器显式设置了
align-items: flex-start，或某个子项写了align-self: flex-start - 父容器设置了
overflow: hidden，且子项有margin-bottom，视觉上被截断，误以为“不等高”
display: table-cell 真的等高吗？它怎么“骗过”你的眼睛
它确实强制等高，但代价是放弃响应式控制和语义清晰性：
- 子项宽度由内容撑开，
width只是建议值，可能被忽略 - 不支持
gap、flex-wrap、flex-grow，小屏下无法自然换行 -
vertical-align: top对齐的是单元格顶部，不是内容顶部，行为反直觉 - 父容器必须设
display: table，不能是inline或flex，否则整个结构崩溃 - 子项里嵌套一个
position: absolute元素，它会完全脱离对齐逻辑，高度不再参与计算
Flex 换行后还等高吗？别指望跨行对齐
flex-wrap: wrap 下，等高只发生在同一行内：
- 第一行最高项决定该行高度，第二行另算，两行之间高度可以完全不同
- 这不是 bug，是 flex 一维布局的本质限制
- 若需 3×3 卡片全部严格等高，必须切换到
display: grid - 移动端从 3 列变 1 列时，改
flex-direction: column后，align-items: stretch不再控制高度——得靠min-height或height手动干预
真正容易被忽略的点是：等高不是“自动发生”的结果，而是拉伸机制在特定条件下的表现。一旦子项带了任何高度约束，或父容器渲染模式被干扰（比如复用组件里悄悄重置了 align-self，或第三方库注入了 min-height: 0），这个机制就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
