加了 display: flex 仍不等高，是因为 align-items: stretch 被禁用：父容器高度 auto 未撑开、子项设 height/min-height/max-height、align-self 或 align-items 被覆盖、flex-direction 为 column 时 stretch 控制等宽而非等高。
直接用 display: flex 就能解决，不需要 JS、不用 hack、也不依赖元素是否定宽——但前提是别关掉默认的拉伸行为。
为什么加了 display: flex 还不等高？
不是 Flex 失效，而是 align-items: stretch 被悄悄禁用了。这个默认值只在交叉轴有“可拉伸空间”时才起作用。
- 父容器高度是
auto且没被内容撑开（比如子项全是position: absolute或float），容器自身塌陷 → 拉伸无基准 - 任一子项写了
height、max-height或min-height: 0（尤其旧 Safari 下min-height: 0会直接中断 stretch） - 子项写了
align-self: flex-start（覆盖父级align-items，单个项就掉队） - 父容器显式设了
align-items: flex-start或align-items: center
flex-direction 改成 column 后还等高吗？
不等高，而且逻辑完全反过来了。
-
flex-direction: row（默认）→ 交叉轴是垂直方向 →align-items: stretch控制等高 -
flex-direction: column→ 交叉轴变成水平方向 →align-items: stretch控制的是“等宽”，不是等高 - 想让 column 方向下多行内容视觉一致？得靠
height或min-height手动约束，或者换用display: grid
子项里有图片、绝对定位或浮动元素会影响等高吗？
不影响外层 Flex 的拉伸计算，但可能让子项“看起来空”或“撑不开”。
-
min-height: auto，会阻止拉伸 → 加min-height: 0释放 -
position: absolute元素脱离文档流，不参与高度计算 → 若靠它“撑高”子项（如top: 0; bottom: 0），子项自身高度可能为 0，拉伸后只剩空白 -
float元素若未清除，旧版 Safari 可能误算子项高度 → 建议统一用overflow: hidden或display: flow-root清除 - 子项用了
display: table-cell？它会无视外层 Flex 的 stretch，必须删掉
真正容易被忽略的点
等高的“高度来源”不是子项决定的，而是父容器交叉轴的尺寸——这个尺寸可能是显式的 height，也可能是上层 flex: 1 分配出来的空间，甚至只是最高子项的内容高度。盯着子项调 height 或 padding，不如先打开开发者工具看一眼父容器的 computed height 是不是 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
