直接给父容器加display: flex即可实现等高，因align-items: stretch是默认值；不生效主因是父容器无交叉轴高度参照（如塌陷）、子项设height/min-height/align-self或flex-direction为column。
直接给父容器加 display: flex 就行，不用写 align-items: stretch——它本来就是默认值，写了反而容易掩盖问题。
为什么加了 display: flex 还不等高
不是 Flex 失效，是拉伸没“参照物”或被子项主动拒绝：
- 父容器高度是
auto且没被撑开：比如内部全是position: absolute或浮动元素，导致容器塌陷；加min-height: 1px或塞一个正常流内容（如空）就能触发拉伸 - 某个子项写了
height、min-height或max-height：只要存在任一值，stretch 就中断，改用该值作为基准高度 - 某个子项写了
align-self: flex-start（或center、baseline）：这会覆盖父级align-items，那个子项就“掉队”了 - 父容器设了
flex-direction: column：此时交叉轴变成水平方向，stretch 拉的是宽度，不是高度
flex-direction: row 和 column 对等高的影响
等高效果永远作用于交叉轴，主轴一变，行为完全不同：
-
flex-direction: row（默认）→ 交叉轴是垂直方向 → 子项等高（你要的效果） -
flex-direction: column→ 交叉轴是水平方向 → 此时是“等宽”，不是等高；想让列方向上等高，得换回row，或者改用display: grid
子项内容溢出或留白太多怎么办
等高解决的是容器盒模型高度一致，不是内容适配。常见副作用是短内容卡片底部大片空白、长内容文字被截断：
- 把
height全部换成min-height：允许子项随内容自然增长，同时保留“至少等高”的底线 - 子项内部若需垂直居中，别用
margin-top: auto配合position: absolute，改用嵌套一层display: flex; flex-direction: column;，再对内部元素设margin-top: auto - 用了
box-sizing: border-box的话，确保padding和border不会意外撑破计算高度；没加的话，min-height值要预留出这部分空间
真正容易被忽略的点是：等高列的“高度来源”从来不由子项决定，而由父容器的交叉轴尺寸决定——这个尺寸可能是显式 height，也可能是上层 flex: 1 分配出来的空间，甚至只是最高子项的内容高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
