加了 display: flex 还不等高，根本原因是 align-items: stretch 被破坏：父容器高度为 auto 未撑开、子项设 height/max-height、align-self 非 stretch、父容器漏写 display: flex，或 flex-direction 为 column 导致交叉轴变水平。
加了 display: flex 还不等高，不是 Flex 失效，而是 align-items: stretch 被悄悄关掉了——它极其脆弱，一行干扰样式就能让它失效。
为什么 display: flex 写了却没等高
根本原因不是语法错，而是拉伸行为依赖的上下文被破坏：
- 父容器高度是
auto且没被内容撑开（比如子项全是position: absolute或浮动），computed height 为0px，stretch 没空间可拉 - 子项写了
height、max-height，或旧 Safari 下写了min-height: 0，直接中断拉伸 - 子项用了
align-self: flex-start或flex: none，主动退出拉伸队列 - 父容器漏写
display: flex，只写了flex-direction或justify-content，Flex 上下文根本没建立
flex-direction: row 和 column 对等高的影响
等高永远发生在交叉轴上，方向一变，效果完全不同：
-
flex-direction: row（默认）→ 交叉轴是垂直方向 → 子项等高（你要的效果） -
flex-direction: column→ 交叉轴变成水平方向 → 此时是“等宽”，不是等高；想让多列卡片在纵向上等高，必须切回row或换用display: grid - 别指望
flex-direction: column+align-items: stretch让多行卡片等高——它只控制每行内子项的宽度对齐
子项内部嵌套 Flex 时怎么避免塌缩
子项里再套一层 Flex 做垂直居中很常见，但容易踩坑：
- 别在子项上写
height: 100%——父容器高度是 auto 时，百分比无法计算，直接失效 - 子项内部若含图片或视频，它们默认
min-height: auto会锁死拉伸，加min-height: 0释放 - 如果子项用了
flex-direction: column，记得给它加height: 100%或flex: 1，否则内容撑不开容器 - 嵌套 Flex 中，外层
align-items: stretch不会穿透到内层；内层要等高，得单独设display: flex和拉伸条件
响应式换行后还等高吗
flex-wrap: wrap 后，等高只在“同一行内”生效：
- 第一行三列，最高项 320px → 该行所有子项都拉到 320px
- 第二行三列，最高项 180px → 该行所有子项都拉到 180px
- 两行之间高度完全独立——这不是 bug，是 Flex 一维模型的本质决定的
- 要实现真正二维等高（比如 3×3 卡片全部严格一致），必须用
display: grid配grid-auto-rows: minmax(0, 1fr)
真正难调试的点往往不在子项样式，而在父容器的 computed height 是多少、是不是 auto；盯着子项调 height，不如先打开开发者工具看一眼父级高度来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
