卡片等高需父容器设display: flex，子元素禁用height、清除margin干扰；IE11需加-ms-flexbox前缀或JS补丁。
卡片容器必须设为 display: flex
仅给子元素加 align-items: stretch 没用，这个属性只在 flex 容器上生效。必须确保父容器（比如 .card-grid）明确声明 display: flex 或 display: inline-flex，否则 align-items 完全不触发。
常见错误是只给卡片本身设 display: flex，结果每张卡片各自 flex，彼此高度仍不一致。
- ✅ 正确：父容器
.card-grid { display: flex; } - ❌ 错误：只写
.card { display: flex; align-items: stretch; } - ⚠️ 注意：若卡片横向排列，还需加
flex-wrap: wrap，否则超出宽度会溢出或强行拉宽
子卡片不能设固定 height 或 min-height 破坏拉伸
align-items: stretch 的前提是子元素没有硬性高度限制。一旦某张卡片写了 height: 200px 或 min-height: 300px，它就不再参与等高计算，其他卡片会被它“带歪”。
如果内容高度差异大（比如有的有标题+三段文字，有的只有图标），建议用 min-height 替代 height，并统一设一个合理基准值。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
.card { min-height: 240px; }（配合 stretch 才有效） - ❌ 避免：
.card { height: 240px; }（强制截断或撑开，破坏等高逻辑） - ? 小技巧：用
flex: 1让卡片自动填满剩余空间，比死写高度更健壮
避免 margin-top / margin-bottom 破坏对齐基线
Flex 的 stretch 是按容器内边框盒（border-box）对齐的，但若卡片内部元素用了 margin-top 或 margin-bottom，可能造成视觉错位——看起来没等高，其实是内容被顶偏了。
特别是标题、按钮等常用元素，容易自带默认 margin，需显式重置。
- ✅ 清除干扰：
.card h3, .card p, .card button { margin: 0; } - ✅ 更稳妥：
.card > * { margin-top: 0; margin-bottom: 0; } - ⚠️ 注意：不要只清
margin，padding过大也会让内容区显得“矮”，需整体协调
IE11 下 align-items: stretch 有兼容问题
IE11 对 align-items: stretch 支持不完整，尤其当子元素含 flex: 1 或嵌套 flex 时，高度常塌陷。这不是 bug，是规范实现差异。
如需兼容 IE11，有两个务实选择：
- ✅ 用
display: -ms-flexbox+-ms-flex-align: stretch（前缀写法） - ✅ 改用 JS 补丁：
document.querySelectorAll('.card').forEach(card => card.style.height = 'auto');后再取最高值统一设高 - ? 提醒：现代项目若已放弃 IE，可忽略此条；但上线前务必在目标浏览器中实测真实内容高度
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
<p>.card-grid .card {
flex: 1 1 300px; /<em> 可伸缩，最小宽300px </em>/
min-height: 240px;
display: flex;
flex-direction: column;
}</p><p>.card-grid .card > * {
margin: 0;
}Flex 等高看着简单，实际卡点往往不在 align-items 本身，而在父容器是否真 flex、子元素有没有偷偷锁死高度、以及浏览器对“stretch”的理解是否一致。
