根本原因是align-items: stretch仅拉伸子项高度而不统一内容区基准线，导致margin-top: auto错位；解决关键是卡片设flex-column，内容区用flex:1占满空间，按钮自然沉底。
Flex容器里卡片高度不一致，按钮沉底对齐失效
根本原因是 align-items: stretch（Flex默认行为）只拉伸子项高度，但不会强制内容区域内部的布局同步；按钮用 margin-top: auto 或 align-self: flex-end 时，若卡片内容高度不同，底部基准线就错开了。
解决思路不是“让卡片更高”，而是“让按钮的定位参考点统一”。常见错误是只加 display: flex; flex-direction: column; 就以为能沉底——漏了关键一步。
- 每张卡片必须设为
display: flex; flex-direction: column; - 卡片内部需有明确的“内容区”和“按钮区”，用
flex: 1占满剩余空间，把按钮“顶”到最下方 - 避免给卡片设固定
height或min-height（除非必要），否则会破坏等高逻辑
用 flex: 1 撑开中间内容区，按钮自然贴底
这是最稳定、兼容性最好的做法。按钮本身不设 margin 或 align-self，而是靠上层弹性流自动分配空间。
`.card {
display: flex;
flex-direction: column;
height: 100%; /* 确保父容器给了高度约束（如 grid / flex 容器） */
}
<p>.card-content {
flex: 1; /<em> 关键：占满所有可用垂直空间 </em>/
}</p><p>.card-button {
margin-top: auto; /<em> 按钮被推到底部 </em>/
}`注意：flex: 1 必须作用在内容容器上，不能直接写在文字段落或图片上；如果卡片里没有明确的 .card-content 包裹层，就得手动加一层 <div class="card-content">...</div>。
立即学习“前端免费学习笔记（深入）”；
父容器必须提供高度约束，否则 flex: 1 不生效
Flex子项的 flex: 1 是按“可用空间”计算的，而可用空间来自父容器。如果父容器高度是 auto（比如普通 div），那卡片高度就由内容撑开，flex: 1 实际没东西可分。
- 常见场景：卡片放在
display: flex; flex-wrap: wrap;的容器里 → 必须给该容器设height或用min-height配合视口单位（如min-height: 100vh） - 更稳妥的做法：用 CSS Grid 做外层布局（
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))），再让每张卡片自己处理内布局 - 不要依赖 JavaScript 计算高度——响应式下容易错位，且 SSR/SEO 不友好
IE11 兼容时 flex: 1 行为异常，改用 flex: 1 0 0
IE11 对 flex: 1 解析不一致，有时会忽略基础尺寸导致内容溢出或按钮悬空。实测有效写法是显式声明三个参数：
.card-content {
flex: 1 0 0; /* 而不是 flex: 1 */
}这个写法在现代浏览器中完全等效，但能绕过 IE11 的 flex 计算 bug。如果项目已放弃 IE 支持，这条可跳过；但只要还有 IE11 流量，就必须加。
真正麻烦的不是写法本身，而是「卡片内容高度差异大 + 父容器高度未约束 + IE11」三者叠加——这时候光调 CSS 很难一眼看出问题在哪，得逐层检查 computed style 中的 flex-basis 和 height 是否符合预期。
