flex或grid可实现真正等高，关键在于避免height/max-height/min-height:0等干扰stretch行为，推荐.container{display:flex}.item{flex:1}或.container{display:grid;grid-template-columns:repeat(3,1fr)}.item{min-height:0}。
直接用 display: flex 或 display: grid 就能实现真正等高，不需要 JS、不用 hack、不靠背景模拟——前提是别乱加限制。
flex 实现等高列：为什么加了 display: flex 还不等高？
因为 align-items: stretch 虽然是默认值，但它会被很多“看似无害”的样式悄悄关掉。
- 子项写了
height、max-height或min-height: 0（尤其旧 Safari 下min-height: 0会破坏拉伸） - 父容器没设高度，且子项用了
height: 100%——但父级实际是auto高度，100%就算不出来 - 子项内部有
flex-direction: column却忘了给它加height: 100%，导致内容撑不开容器 - 用了
flex: none或flex-shrink: 0，让子项拒绝压缩/拉伸
最简可靠写法：
.container { display: flex; }
.item { flex: 1; } /* 不写 height，不写 align-self */
grid 实现等高列：为什么 grid-template-rows: 1fr 有时反而更糟？
因为 1fr 是按可用空间均分，如果父容器高度不确定（比如由内容撑开），1fr 可能被解析为 0，导致子项塌缩；而省略 grid-template-rows 反而更稳——Grid 默认按最高项自动定行高，并用 align-items: stretch 拉齐。
- 单行多列布局：用
grid-template-columns: 1fr 1fr 1fr，不写grid-template-rows - 多行网格需每行都等高：才用
grid-auto-rows: 1fr；Safari ≤15.4 有 bug，可改用minmax(0, 1fr) - 子项里再嵌 flex 做垂直居中？没问题，但别在子项上写
height: 100%—— Grid 子项默认已填满单元格 - 需要兼容旧 Safari？给子项加
min-height: 0防 collapse
推荐写法：
.container { display: grid; grid-template-columns: repeat(3, 1fr); }
.item { min-height: 0; }
flex-wrap 后的等高行为：别指望跨行对齐
flex-wrap: wrap 下，只有“同一行内”的子项等高，换行后的新行高度由该行最高项决定——行与行之间高度可能完全不同。这不是 bug，是 flex 的一维本质决定的。
- 要实现真正二维等高（比如 3×3 卡片全部严格等高），必须切到
display: grid - 如果只是响应式从 3 列变 1 列，用
@media切换flex-direction: column即可，但注意：column 方向下align-items: stretch不控制高度，得靠height或其他手段 - 想在 flex 中模拟“全等高”，只能手动给所有子项设相同
min-height，但这不是自适应方案
哪些情况真不该用 flex/grid？
只有两种现实场景还值得回头碰老方案：
- 需要支持 IE10 及以下 —— 只能用
display: table-cell，但得接受它不支持margin、不能 flex-wrap、vertical-align 行为反直觉 - 极端性能敏感且列数极多（比如渲染上千个等高项）—— flex/grid 的 layout 计算开销略高于 float + 背景模拟，但这种场景现代设备极少遇到
真正容易被忽略的点：等高是容器高度一致，不是内容底部对齐。如果你看到文字或按钮没沉到底部，那是 justify-content: flex-end 或 align-self: end 的事，和等高本身无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
