加 display: flex 即可实现等高列，因 align-items: stretch 为默认值；不等高主因是父容器高度未明确、子项设了 height/min-height 或 align-self 覆盖拉伸。
直接给父容器加 display: flex 就行，不需要写 align-items: stretch —— 它本来就是默认值，写了反而多余。
为什么加了 display: flex 还不等高？
不是 Flex 不工作，而是布局上下文干扰了拉伸行为。最常踩的坑就三类：
- 父容器高度是
auto且没被撑开：比如外层是普通div，里面只有浮动/绝对定位子项，导致容器“塌陷”，stretch没东西可拉——加min-height: 1px或塞个正常流内容就能触发 - 子项自己设了
height、min-height或max-height：只要任一值存在，拉伸就中断，改用该值作为基准高度 - 子项写了
align-self: flex-start（或center、baseline）：这会覆盖父级的align-items，单个子项就“掉队”了
flex-direction: row 和 column 对等高的影响
等高效果永远作用于交叉轴，方向一变，行为就完全不同：
-
flex-direction: row（默认）→ 交叉轴是垂直方向 → 子项等高（你要的效果） -
flex-direction: column→ 交叉轴变成水平方向 → 此时是“等宽”，不是等高；想让子项在列方向上等高，得换回row，或者改用grid
别指望 flex-direction: column + align-items: stretch 能让多行卡片等高——它只管每行内子项的宽度对齐。
子项内容溢出或留白太多怎么办？
等高解决的是容器盒模型高度一致，不是内容适配。常见副作用是短内容卡片底部大片空白、长内容文字被截断。应对思路不是取消等高，而是松动约束：
- 把
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 分配出来的空间，甚至只是最高子项的内容高度。盯着子项调样式，不如先检查父容器的 computed height 是多少、是不是 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
