为什么CSS Flex卡片高度会不一致？

Flex卡片高度不一致的根本原因是align-items: stretch未生效，需同时满足父容器设display: flex、子项无height/max-height/min-height、子项内无absolute/float元素三个条件。

Flex卡片高度不一致，不是Flex失效，而是align-items: stretch被悄悄禁用或根本没生效——它只在特定条件下起作用，一碰就断。

align-items: stretch 为什么没拉伸？三个硬性条件缺一不可

很多人写了align-items: stretch却看到卡片还是高矮不一，问题几乎都出在这三点同时缺失：

1. 父容器没设display: flex（只给卡片自己加display: flex是无效的）
2. 某张卡片写了height、max-height或min-height（哪怕min-height: auto也会干扰）
3. 卡片内部用了position: absolute或float的元素（它们脱离文档流，不参与高度计算）

flex-wrap: wrap 后高度更乱？那是设计使然，不是bug

align-items: stretch只对同一行内的子项生效。一旦启用flex-wrap: wrap，第二行的卡片就和第一行完全解耦——浏览器不会跨行找最高项来拉伸。你看到的“不等高”，其实是每行各自按本行最高卡片拉伸的结果。

常见错误写法：.card-list { display: flex; flex-wrap: wrap; } —— 这种写法注定无法全局等高。

可行做法：

1. 结构上分组：每3张卡片包一层.card-row，每层单独设display: flex
2. 避免在整页容器上直接flex-wrap，那是把问题交给浏览器猜
3. 如果必须跨行等高，别硬扛Flex，改用display: grid或JS补丁

卡片内容本身就在破坏等高感

即使align-items: stretch生效了，视觉上仍可能“不等高”，因为内容结构失控：

1. 标题行数不同（一行 vs 三行），导致顶部锚点错位
2. 图片没约束宽高比，object-fit: cover救不了原始尺寸差异
3. 按钮文字长度浮动，“查看详情”和“点击此处了解更多详情”撑开不同高度
4. 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。

务实方案：

1. IE11：降级用display: -ms-flexbox; -ms-flex-align: stretch，或 JS 遍历取offsetHeight最大值后统一设style.height
2. Safari：在卡片上加height: 0; min-height: 100%，强制触发拉伸逻辑
3. 所有现代浏览器：别在卡片内混用position: absolute和align-items: stretch，这是最隐蔽的失效原因

最容易被忽略的点：开发者总以为“写了stretch就万事大吉”，其实它连本行最高项的高度，都受字体渲染、box-sizing、border和padding影响——这些细节不控死，等高就是幻觉。