flex-direction: column是硬性前提，否则margin-top: auto等无效；按钮非直接子元素时，需在其父容器设该属性并加margin-top: auto；外层网格须align-items: stretch或min-height确保卡片等高。
flex-direction: column 是硬性前提，不是可选项
卡片底部按钮推不到底，90% 是因为没写 flex-direction: column。Flex 默认主轴是 row，此时 margin-top: auto、align-self: flex-end 全部失效——它们只在垂直流中起作用。
必须显式声明：.card { display: flex; flex-direction: column; }，且这个规则不能被更高优先级样式覆盖。用浏览器开发者工具检查 computed styles，确认值确实是 column，而不是被继承或重置。
如果按钮不在 .card 的直接子级（比如套了 .card-content 或 .card-body），那 flex-direction: column 得加在它的父容器上，而不是外层 .card。
margin-top: auto 必须加在按钮的直接父容器上
margin-top: auto 不是按钮自己的属性，而是它所在 Flex 项目的控制手段。只要按钮嵌套超过一层，比如 <div class="card"><div class="card-content"><div class="card-actions"><button>操作</button></div></div></div>，那 margin-top: auto 就得加在 .card-actions 上，而不是 button 或 .card-content。
立即学习“前端免费学习笔记（深入）”；
-
.card-actions必须是.card-content的直接子元素 -
.card-content必须已启用display: flex; flex-direction: column - 别给
.card-actions设height或flex-shrink: 0，否则它会拒绝收缩，阻断空间吸收
卡片高度不一致时，按钮视觉对齐仍会失败
即使每张卡片内部按钮都到底了，看起来还是高低不一，问题大概率不在按钮，而在外层网格容器没拉齐卡片高度。Flex 的 align-items: stretch 只在父容器有明确高度约束时才生效；多数情况父容器是 height: auto，stretch 就失效了。
解决方法：
- 给卡片父容器（如
.card-grid）加align-items: stretch - 给每张卡片设
min-height（比如min-height: 240px），比依赖height: 100%更稳妥 - 更彻底的方案：换用
display: grid，grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))天然同列等高
响应式换行后跨行按钮不对齐是正常行为
Flex 的 align-items 和 justify-content 只作用于单行内元素，跨行不联动。小屏下卡片换行后，不同行之间高度独立，按钮自然无法跨行对齐。
这不是 bug，是 Flex 布局的固有特性。如果业务强依赖跨行对齐，务实选择只有两个：
- 用 Grid 替代 Flex，靠列对齐天然解决
- 给卡片统一
height（需父容器有高度参考，如min-height: 100vh），但会牺牲内容自适应性
最常被忽略的一点：卡片内文字溢出未截断，white-space: normal + overflow: hidden + text-overflow: ellipsis 必须配合 display: -webkit-box 或 line-clamp，否则长文本会顶高卡片，前面所有对齐都白做。
