结论：不要用 display: table-cell 做等高列，优先用 display: flex；它不是“也能用”，而是“唯一合理选择”。因语义错误、响应式断裂、嵌套受限等问题上线后易突发且修复成本高。
display: table-cell 做等高列，优先用 display: flex；它不是“也能用”，而是“唯一合理选择”**。语义错误、响应式断裂、嵌套受限这三类问题，在上线后大概率会突然暴露，且修复成本远高于初期选型成本。
为什么 display: table-cell 看似能用，实则危险
它确实能让几列视觉上“看起来等高”，但这是靠模拟表格单元格行为实现的，和布局逻辑无关：
- 语义错位：
table-cell属于数据表格结构，用于导航栏、卡片区、侧边栏这类纯布局容器，违反 HTML5 含义原则，影响屏幕阅读器识别和 SEO 抓取 - 响应式硬伤：一旦加媒体查询把某列设为
display: block（比如小屏堆叠），整行立刻塌陷——table模式下无法单独隐藏一列，display: none会让该列完全消失，破坏表格流 - 内部失控：子元素若用
position: absolute，又没给父列加position: relative，定位基准会跳到视口，内容溢出不可控 - 间距难调：列间
margin被忽略，只能靠padding或额外 wrapper，DOM 层级无谓加深
display: flex 实现等高列的关键条件
Flex 不是“设了就自动等高”，它依赖两个前提同时成立：
- 父容器必须有可参照的高度上下文，例如
min-height: 300px、height: 100vh，或由html/body传递下来的明确高度；纯靠内容撑开的父容器，子项高度仍由各自内容决定 - 子项不能覆盖默认的
align-items: stretch行为：禁止写height、max-height、flex: none，否则拉伸被中断 - 含图片的列需额外处理：
img { height: 100%; object-fit: cover; }，否则原始尺寸撑开，破坏拉伸效果 - 推荐统一加
box-sizing: border-box，避免padding和border导致宽度/高度计算偏差
常见错误现象与对应修正
你看到“三列高度不一致”，90% 是以下某个条件没满足：
-
现象：父容器用了
display: flex，但一列明显矮一截
原因：该列写了height: 200px或flex: 0 0 auto，覆盖了 stretch 行为
修正：删掉显式高度，或改用align-self: flex-start显式声明不对齐需求 -
现象：所有列都短，没随最高列拉伸
原因：父容器没有min-height或其他高度约束，高度由最短列内容决定
修正：加min-height: 400px（按业务最低可视区域定） -
现象：Chrome 下正常，Firefox 中某列莫名收缩
原因：空内容列在纯1fr下偶有计算异常（注意：这是 grid 场景，但常被误归到 flex）
修正：确认你用的是 flex；若真在 grid 中，改用minmax(0, 1fr)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
