Flexbox 的 align-items: stretch 是最直接、最可靠的方式，但必须满足三个前提：父容器是 display: flex、子卡片不设 height、内部内容不脱离文档流；否则高度依然参差不齐。
Flexbox 的 align-items: stretch 是最直接、最可靠的方式，但必须满足三个前提：父容器是 display: flex、子卡片不设 height、内部内容不脱离文档流。否则高度依然参差不齐。
为什么卡片还是不等高？检查这三处硬性条件
很多人写了 align-items: stretch 却没效果，根本原因是它只在 flex 容器上生效，且极易被覆盖或干扰：
- 父容器没设
display: flex（只给卡片本身加display: flex是无效的） - 某张卡片写了
height、max-height或min-height，强行锁死自身高度 - 卡片内用了
position: absolute的标题/按钮，导致内容不参与高度计算
flex-wrap 换行后等高失效？每行得单独包裹
Flex 默认只对单行子项拉伸。一旦启用 flex-wrap: wrap，第二行的卡片就不再和第一行对齐——浏览器不知道“这一行该以谁为基准”。解决办法不是加 JS，而是结构层面隔离：
- 用 JS 或服务端按每 N 个卡片包一层
.card-row（例如每行 3 张） - 每个
.card-row单独设display: flex和gap - 避免在整页容器上直接
flex-wrap，那是自找麻烦
卡片内底部按钮固定，又不想撑开高度？用 flex-column + margin-top: auto
文字少的卡片常因底部按钮“上浮”显得矮，这不是高度问题，是内容对齐错觉。正确做法是让卡片内部也走 flex 垂直布局：
- 卡片本身设
display: flex; flex-direction: column; height: 100% - 按钮加
margin-top: auto，自动吸附到底部 - 标题和描述保持正常流，不设
height或position
这样即使文字行数不同，视觉锚点一致，等高感更强。
IE11 兼容怎么办？别硬扛 align-items: stretch
IE11 对 align-items: stretch 支持极不稳定，尤其嵌套 flex 或含 flex: 1 时容易塌高。务实方案只有两个：
- 降级用前缀：
display: -ms-flexbox; -ms-flex-align: stretch - JS 补丁：遍历所有卡片，取
offsetHeight最大值，统一赋给每张卡片的style.height
真要全兼容 IE11，Grid 的 grid-auto-rows: 1fr 也不行——它在 IE 中完全不识别，所以 Flex + 前缀仍是唯一可行路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
