flex卡片高度不一致的根本原因是align-items: stretch未生效，需同时满足父容器设display: flex、子项无height/max-height/min-height、子项内无absolute/float元素三个条件。
Flex卡片高度不一致，不是Flex失效，而是align-items: stretch被悄悄禁用或根本没生效——它只在特定条件下起作用，一碰就断。
align-items: stretch 为什么没拉伸？三个硬性条件缺一不可
很多人写了align-items: stretch却看到卡片还是高矮不一，问题几乎都出在这三点同时缺失：
- 父容器没设
display: flex（只给卡片自己加display: flex是无效的） - 某张卡片写了
height、max-height或min-height（哪怕min-height: auto也会干扰） - 卡片内部用了
position: absolute或float的元素（它们脱离文档流，不参与高度计算）
flex-wrap: wrap 后高度更乱？那是设计使然，不是bug
align-items: stretch只对同一行内的子项生效。一旦启用flex-wrap: wrap，第二行的卡片就和第一行完全解耦——浏览器不会跨行找最高项来拉伸。你看到的“不等高”，其实是每行各自按本行最高卡片拉伸的结果。
常见错误写法：.card-list { display: flex; flex-wrap: wrap; } —— 这种写法注定无法全局等高。
可行做法：
- 结构上分组：每
3张卡片包一层.card-row，每层单独设display: flex - 避免在整页容器上直接
flex-wrap，那是把问题交给浏览器猜 - 如果必须跨行等高，别硬扛Flex，改用
display: grid或JS补丁
卡片内容本身就在破坏等高感
即使align-items: stretch生效了，视觉上仍可能“不等高”，因为内容结构失控：
- 标题行数不同（一行 vs 三行），导致顶部锚点错位
- 图片没约束宽高比，
object-fit: cover救不了原始尺寸差异 - 按钮文字长度浮动，“查看详情”和“点击此处了解更多详情”撑开不同高度
-
text-overflow: ellipsis没配display: -webkit-box，长文本直接顶高卡片
真正可控的是结构：统一aspect-ratio、截断标题/摘要行数、固定按钮文案、所有卡片内height: 0; min-height: 100%。
IE11 或 Safari 下表现异常？别怪浏览器，是属性组合踩了坑
IE11 对align-items: stretch支持极不稳定，尤其嵌套Flex或含flex: 1时容易塌高；Safari 则对height: 100%依赖父级显式高度，而响应式里父级常是auto。
务实方案：
- IE11：降级用
display: -ms-flexbox; -ms-flex-align: stretch，或 JS 遍历取offsetHeight最大值后统一设style.height - Safari：在卡片上加
height: 0; min-height: 100%，强制触发拉伸逻辑 - 所有现代浏览器：别在卡片内混用
position: absolute和align-items: stretch，这是最隐蔽的失效原因
最容易被忽略的点：开发者总以为“写了stretch就万事大吉”，其实它连本行最高项的高度，都受字体渲染、box-sizing、border和padding影响——这些细节不控死，等高就是幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
