卡片按钮贴底需三步：一设.card为flex-column；二将margin-top:auto加在按钮的直接父容器（.card的子元素）；三用.card-grid的align-items:stretch拉齐卡片高度。
卡片操作区不贴底，90%因为没设 flex-direction: column
Flex 默认主轴是水平方向（row），此时 margin-top: auto、align-self: flex-end 都只影响水平对齐或交叉轴位置，根本推不到底部。必须显式声明垂直流向：.card { display: flex; flex-direction: column; }——这是所有“按钮贴底”方案的硬性前提，漏掉它，后面全白搭。
按钮不是 .card 的直接子元素时，margin-top: auto 加在哪？
常见结构里按钮套在 .card-content 或 .card-footer 里，这时 margin-top: auto 不能加在 button 上，它压根不是 Flex 项目的直接子项。正确做法是：
- 给包裹按钮的最外层容器（比如
.card-footer）加margin-top: auto，前提是它是.card的直接子元素 - 如果按钮嵌套更深（如
.card > .card-body > .actions > button），就把.actions设为display: flex; flex-direction: column;，再给它加margin-top: auto - 用浏览器开发者工具检查 computed styles，确认目标容器的
flex-direction确实是column，且没被更高优先级规则覆盖
卡片高度不一致，按钮视觉上还是错位，问题出在哪？
按钮各自都到底了，但卡片本身高度不同，导致底部不在同一水平线——这不是按钮的问题，是外层网格/容器没拉齐卡片高度。解决方法：
-
.card-grid（卡片父容器）必须设display: flex; flex-wrap: wrap;，并启用align-items: stretch - 每张
.card要有明确高度参与拉伸，推荐设min-height: 100%或固定高度（如height: 320px），否则align-items: stretch在内容撑开高度时无效 - 避免用
height: 100vh给卡片设高，容易在移动端因地址栏缩放导致计算偏差；min-height更稳妥
按钮内部要水平排布，还能用 margin-top: auto 吗？
可以，但别在按钮上直接写 margin 调间距——会干扰 margin-top: auto 的空间吸收逻辑。正确方式是让按钮容器自己成为 Flex 容器：
立即学习“前端免费学习笔记（深入）”；
- 给
.card-footer加display: flex和justify-content: center（居中）或space-between（两端对齐） - 用
gap: 0.5rem控制按钮间距，比margin更干净、不影响 flex 布局计算 - 如果按钮数量动态，优先用
justify-content: space-between，避免最后一行只剩一个按钮时左右空荡
真正难的不是让按钮“看起来到底”，而是确保它所在的那层容器是垂直流、高度可参与分配、且没有被多层 wrapper 切断作用链。每次调不好，先查三层：flex-direction 是否为 column、按钮是否直属于该容器、外层网格是否启用 stretch 拉齐高度。
