Flex布局是解决多列等高的最可靠方案：父容器设display: flex，子项自动拉伸等高；伪元素和table-cell方案存在兼容性、语义及响应式缺陷，现代框架默认支持flex等高。
Flex 布局让多列自动等高最直接
Flex 是目前解决多列不等高问题最可靠的方式，只要父容器设为 display: flex，子项默认就拉伸到同一高度。不需要额外 hack，也不依赖内容顺序。
常见错误是只给子项加 flex: 1 却忘了父容器必须是 display: flex，或者误用 flex-direction: column（这会让子项垂直堆叠，不是多列）。
- 多列横向排列：父容器用
display: flex+flex-wrap: wrap（可选），子项默认align-items: stretch - 需要响应式断行时，配合
min-width控制子项最小宽度，避免过窄换行破坏等高效果 - 若子项内有
margin-bottom影响视觉对齐，优先改用padding-bottom或在父容器加gap（注意 Safari 旧版不支持gap）
伪元素 ::after 模拟等高仅适用于固定布局
用伪元素撑开父容器高度的方案，本质是“视觉欺骗”——它让所有列看起来一样高，但实际 DOM 高度仍不同。只适合背景色/边框对齐这类简单场景，不能用于交互区域（比如 hover 区域错位、点击热区不一致）。
典型写法是给每列加 position: relative，再用 ::after 绝对定位并设 height: 100%。但前提是父容器有明确高度，或靠 JS 动态计算最高列——否则伪元素高度无从参考。
立即学习“前端免费学习笔记（深入）”；
- 必须确保父容器有
overflow: hidden或其他方式隐藏溢出，否则伪元素可能撑破布局 - 如果列中包含图片或异步加载内容，伪元素高度可能在内容渲染前就已计算，导致错位
- 不推荐在 CSS 框架（如 Bootstrap、Tailwind）的栅格系统里硬套该方案，容易和框架自身
row/col的 flex 行为冲突
为什么不要用 display: table-cell 模拟等高
display: table-cell 确实能强制等高，但它把语义和行为都绑定到了表格模型上：列宽由内容撑开、无法设置 flex-grow、vertical-align 行为不可控、响应式断行几乎不可行。
更麻烦的是，一旦某列内容超长触发换行，其他列会被一起“顶高”，但这种高度同步是被动的、不可预测的，调试起来非常吃力。
- 移动端 viewport 缩放后，
table-cell容易出现意外的横向滚动条 - 与现代 CSS 动画（如
transform）组合使用时，性能明显劣于 flex - 几乎所有主流 CSS 框架已弃用该方案，文档里也基本不提了
框架里遇到不等高，先查是否启用了 flex 模式
像 Bootstrap 5+、Bulma、Foundation 这些框架，默认栅格就是基于 Flex 实现的。如果你发现多列不等高，大概率是因为某个地方覆盖了 display: flex，比如写了 display: block !important，或者父容器被其他样式重置了 align-items。
检查顺序建议：打开浏览器开发者工具 → 选中父容器 → 在 Styles 面板里确认 display 是 flex，且没有被后续规则覆盖；再看 Computed 标签页里 align-items 是否为 stretch。
- Bootstrap 中
.row默认是display: flex，但如果你手动加了.no-gutters或修改了$grid-gutter-width，要留意是否连带影响了align-items - Tailwind 用户常误以为
grid类比flex更适合多列等高，其实grid默认不等高，需显式加grid-rows-[1fr]或类似约束 - 如果框架版本较老（如 Bootstrap 4 之前），它用的是 float 布局，那必须升级或手动切换到 flex 模式
真正难处理的不是技术方案本身，而是那些混用了 JS 动态插入内容、CSS-in-JS 注入样式、以及框架组件封装层级过深的场景——这时候 flex 的 align-items: stretch 可能被某层 shadow DOM 或 scoped style 截断，得一层层往上揪样式来源。
