直接用 display: flex 就能实现真正等高列，因 align-items: stretch 为默认行为；效果失效主因是子项设了 height/min-height、父容器无高度基准、align-self 覆盖或布局上下文干扰。
直接用 display: flex 就能实现真正等高列，display: table-cell 只在必须兼容 IE8–9 时才考虑，而且它不是“盒模型”特性，是表格渲染模型——别被标题误导。
为什么 display: flex 默认就等高，但你却没看到效果？
因为 align-items: stretch 这个默认行为很容易被悄悄关掉：
- 子项写了
height、max-height或min-height: 0（尤其旧 Safari 下min-height: 0会直接破坏拉伸） - 父容器没设高度，子项又写了
height: 100%—— 此时 100% 算不出具体值，反而让拉伸失效 - 子项内部用了
display: table-cell或float，脱离了 flex 子项的正常渲染流 - 父容器显式设置了
align-items: flex-start或子项写了align-self: flex-start
最简可靠写法就是：.container { display: flex; } + .item { flex: 1; }，其他什么都别加。
display: table-cell 真的等高吗？它怎么“骗过”你的眼睛
它确实强制等高，但代价是放弃语义、响应式和弹性控制：
- 子项宽度由内容撑开，
width只是“建议值”，实际可能被忽略 - 不支持
flex-grow、gap、flex-wrap，也没办法在小屏下自然换行 -
vertical-align表现反直觉：比如vertical-align: top对齐的是单元格顶部，不是内容顶部 - 父容器必须设
display: table，不能是inline或flex，否则整个结构失效
示例中看似正常，是因为你没试过在子项里嵌套一个 position: absolute 的元素——它会完全脱离对齐逻辑。
Flex 换行后还等高吗？别指望跨行对齐
flex-wrap: wrap 下，只有同一行内的子项等高；换行后的新行，高度由该行最高项决定，两行之间高度可以完全不同。
- 这不是 bug，是 flex 一维布局的本质限制
- 如果需要 3×3 卡片全部严格等高，必须切到
display: grid - 想在移动端从 3 列变 1 列？用
@media改flex-direction: column可以，但注意：column 方向下align-items: stretch不控制高度，得靠height或min-height手动干预
真正容易被忽略的点是：等高不是“自动发生”的结果，而是拉伸机制在特定条件下的表现。一旦子项带了任何高度约束，或父容器渲染模式被干扰，这个机制就断了——而这类干扰往往藏在复用组件、CSS 重置或第三方库的样式里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
