flex和grid可原生实现等高布局，无需js或hack；flex默认align-items: stretch实现单行等高，grid按行等高适合二维布局；table-cell仅作老浏览器兜底，需注意语义与响应式问题。
直接用 display: flex 或 display: grid，99% 的场景下不需要 JS、不用 hack、不依赖内容长度。
flex 实现等高：对齐方式别乱动
父容器设 display: flex 后，子元素默认就等高——因为 align-items 默认值是 stretch。只要没显式改过这个值，高度就自动拉齐。
- 别在子项上写
height: 100%或min-height: 0，这会破坏拉伸行为 - 如果子项内部要控制内容对齐（比如按钮沉底），得让子项自己也变成 flex 容器，再用
margin-top: auto或flex-grow: 1分配剩余空间 -
flex-wrap: wrap不影响单行内的等高，但换行后每行各自等高，不是全局统一高度
grid 实现等高：适合多行卡片或仪表盘
Grid 的等高是“按行”生效的，同一网格行里的项目自动等高，比 flex 更适合二维布局场景。
- 用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))可自适应列数，每行内等高 - 想强制所有行都和最高行一样高，加
grid-auto-rows: 1fr，但注意这会让矮内容区域留白 - 别给子项加
height: 100%或min-h-0（Tailwind 里），会干扰 grid 的自动高度计算
兼容老浏览器时，display: table-cell 能用但有硬伤
IE8+ 支持，语义错位、响应式难做、没法用 margin，只建议兜底或遗留系统维护。
- 父容器必须设
display: table; width: 100% - 子项设
display: table-cell，宽度用百分比或固定值，不能用flex相关属性 - 垂直居中只能靠
vertical-align: middle，margin无效，间距得靠padding或外层 wrapper - 媒体查询里切单列时，得手动把
table-cell改回block，否则会错位
真正容易被忽略的是内容加载节奏：图片、异步文本、字体加载都会导致初始高度塌陷，哪怕用了 flex/grid，页面也可能先抖一下。加 min-height 占位或用 aspect-ratio 锁定卡片比例，比等高本身更影响体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
