display: flex原生支持真等高，无需模拟；关键在于确保父容器有高度基准且子项未用height/max-height/align-self等覆盖align-items: stretch默认拉伸行为。
display: flex 本身就能模拟 table-cell 的等高行为，不需要“模拟”——它原生支持真等高，且语义正确、响应式友好。关键不是怎么模仿，而是别让某些样式把默认拉伸给关掉。
为什么加了 display: flex 还不等高？
因为 align-items: stretch（默认值）只在满足两个条件时才生效：
- 父容器在交叉轴（垂直方向）有可参照的高度：比如设置了
min-height、height，或被上层flex容器用flex: 1分配了空间；纯靠内容撑开的父容器，子项高度仍由各自内容决定 - 子项没显式覆盖拉伸行为：写了
height、max-height、min-height: 0、align-self: flex-start或flex: none都会中断拉伸
flex 子项里图片/文字溢出导致高度错乱怎么办？
等高是容器级行为，但内容失控会破坏视觉一致性：
-
img标签必须加max-width: 100%和height: auto，否则原始尺寸会撑高单列，拉伸基准失准 - 短内容列底部留白？在子项内部用
display: flex; flex-direction: column，再对操作按钮加margin-top: auto推到底部 - 长内容需要滚动？子项设
min-height: 0（尤其旧 Safari），再配合overflow-y: auto，避免拉伸失效后塌缩
兼容 IE10–11 的硬伤怎么绕？
IE11 对 align-items: stretch 的解析不稳定，尤其嵌套或含 min-height 时：
立即学习“前端免费学习笔记（深入）”；
- 子项别写
flex: 1，改用flex-grow: 1; flex-shrink: 1; flex-basis: auto - 父容器慎用
min-height，可尝试height: 1px; min-height: 100%这类 hack - 必要时对 IE 单独加
display: table-cell; vertical-align: top兜底，但注意：它不支持flex-wrap，小屏堆叠需额外媒体查询处理
真正难的不是写对那几行 CSS，而是意识到：等高由父容器控制，子项只能服从；一旦混用 height、vertical-align 或 flex-shrink: 0，拉伸就容易静默失效——而且 JS 动态加载内容后，它不会自动重算。
