flex-direction: column 是硬性前提，按钮贴底失效主因是未声明该属性；按钮须为Flex容器直接子元素；卡片高度不一致需用min-height或flex:1统一；按钮组应设为Flex容器并用gap布局。
flex-direction: column 是硬性前提，不是可选项
按钮在弹性容器里贴不到底，90% 的原因是没写 flex-direction: column。Flex 默认主轴是水平方向（row），此时 margin-top: auto、align-self: flex-end 全部失效——它们只在垂直主轴下才控制“上下”位置。
必须显式声明：.card { display: flex; flex-direction: column; }。如果按钮不在 .card 直接子级（比如套了 .card-body），那 flex-direction: column 得加在它的父容器上，而不是外层卡片。
用浏览器开发者工具检查 computed styles，确认 flex-direction 确实是 column，别被高优先级规则覆盖。
按钮必须是 Flex 容器的直接子元素
常见结构是：<div class="card"><div class="card-content"><h3>标题</h3><p>描述</p><div class="card-actions"><button>操作</button></div></div></div>。这里 <button> 不是 .card 的直接子项，margin-top: auto 加在 button 上完全无效。
立即学习“前端免费学习笔记（深入）”；
正确做法有二：
- 给
.card-actions加margin-top: auto（前提是它是.card-content的直接子元素） - 让
.card-content成为 Flex 容器，并设justify-content: space-between，把标题+描述包进一个<div>，按钮单独作为最后一个子元素
嵌套越深，定位控制断裂风险越高。能扁平就别套 wrapper。
卡片高度不一致时，按钮视觉上仍会错位
即使每张卡片内部按钮都到底了，看起来还是高低不一——问题不在按钮，而在卡片本身高度不同。Flex 的 align-items: stretch 只在父容器有明确高度或子项未设 height 时才生效。
解决方法：
- 外层网格容器（如
.card-grid）用display: flex; flex-wrap: wrap;，但不要设align-items: flex-end——那是压整张卡片，不是对齐按钮 - 每张卡片设
min-height或统一height，配合box-sizing: border-box避免内边距/边框影响实际高度 - 若内容长短差异大，推荐用
flex: 1撑开主体区域，把按钮“顶”到底部，比单纯依赖margin-top: auto更稳
按钮组内部还要排布？别在 button 上调 margin
按钮不止一个，还要居中、等距或两端对齐？不能靠给每个 button 加 margin 来调——这会干扰 margin-top: auto 的空间计算逻辑。
正确做法是让按钮容器自己成为 Flex 容器：
.card-actions { display: flex; justify-content: center; gap: 0.5rem; }
或数量动态时：
.card-actions { display: flex; justify-content: space-between; }
gap 比 margin 更可控，且不影响父级 Flex 的空间分配。别忽略 box-sizing: border-box 统一，否则边框和 padding 会让实际高度偏差几像素，按钮看着就偏高。
