flex等高失效主因是父容器无高度基准、子项设了height类属性或flex-direction错误；需设min-height、删高度限制、避免column方向拉伸、卡片加min-width:0。
加了 display: flex 还不等高，基本不是 Flex 失效，而是它被你无意中关掉了——关键就卡在三个地方：父容器没高度基准、子项锁死了自身高度、或拉伸方向根本错了。
父容器必须有可参照的高度基准
Flex 子项靠 align-items: stretch 拉伸，但“拉伸”需要一个目标高度。如果父容器是 height: auto 且内容极短，它自己就塌缩了，子项再怎么拉也“无处可拉”。
- 给父容器设
min-height（比如min-height: 200px或min-height: 100vh） - 或者让它继承上级的弹性高度（如上级设了
flex: 1） - 避免只靠内容撑开父容器，尤其在卡片内容差异大时
子项不能写 height / min-height / max-height
这些属性会直接覆盖 align-items: stretch 的默认行为，让子项“钉死”在某个尺寸上，等高逻辑立刻中断。
- 删掉所有
.card { height: 300px; }、min-height: 200px、max-height: 400px - 如果担心卡片太矮，用
min-height是可以的，但仅限于父容器已有高度基准的前提下；否则它反而会干扰拉伸 -
flex: 1是安全替代：它等价于flex: 1 1 0%，从零开始均分空间，强制等高且不冲突
别用 flex-direction: column 来“纵向排卡片”
很多人想让卡片竖着排（一列多行），就给父容器设 flex-direction: column，结果发现高度不一致——因为此时交叉轴变成水平方向，stretch 拉伸的是宽度，不是高度。
- 要纵向排列且等高？换
display: grid，配grid-auto-rows: 1fr - 真要用 Flex 实现单列多行等高，只能把每“行”单独包一层（如
.card-row），每层设display: flex，这样每组内仍能拉伸 -
flex-wrap: wrap启用后，换行的卡片不再和前一行对齐——这是 Flex 的设计限制，不是 bug
卡片内部按钮对齐要靠 margin-top: auto，不是 position: absolute
文字少的卡片按钮上浮，常被误认为“高度不一致”，其实是内容没锚定。绝对定位会让按钮脱离文档流，无法响应拉伸后的实际高度。
- 给卡片设
display: flex; flex-direction: column; - 内容区（如
.card-body）加flex: 1，占满剩余空间 - 按钮加
margin-top: auto，自动吸到底部 - 如果非用
position: absolute，务必确保父卡片有position: relative，且知道此时它的高度已是拉伸后的可靠值
最易被忽略的一点：长单词或 URL 会触发浏览器默认的 min-width: auto 保护，导致某张卡片拒绝收缩，整行 flex 计算错乱。必须加 min-width: 0 到卡片上，否则哪怕其他条件全对，等高也会在 Chrome/Firefox 中意外失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
