必须设display: flex和flex-direction: column，按钮须为卡片直接子元素；外层需align-items: stretch并配min-height确保等高；按钮容器应单独设flex布局控制间距，且用gap而非margin。
必须给卡片容器设 display: flex + flex-direction: column，否则所有“推到底部”的操作都无效；按钮还必须是卡片的直接子元素，否则 margin-top: auto 无法生效。
卡片本身要成为垂直 Flex 容器
常见错误是只写 display: flex，却漏掉 flex-direction: column。Flex 默认主轴是水平方向（row），此时 justify-content 控制左右，align-items 控制上下——但“底部对齐”需要的是主轴为垂直时的 justify-content: space-between 或交叉轴上的 margin-top: auto。
所以第一步必须明确声明：
.card {
display: flex;
flex-direction: column;
}
- 没这句，
margin-top: auto加在按钮上毫无反应 -
align-self: flex-end在flex-direction: row下虽能对齐容器底边，但不是卡片视觉底部——除非卡片有固定高度 - 响应式换行（
flex-wrap: wrap）时，每行卡片高度由该行最高项决定，flex-direction: column是跨行等高的前提
按钮必须是卡片的直接子元素
如果 HTML 是 <div class="card"><div class="content">...</div><div class="footer"><button>操作</button></div></div>，那么 margin-top: auto 要加在 .footer 上，而不是 <button>。因为 margin-top: auto 只在 Flex 项目（即父容器的直接子项）上才触发自动分配剩余空间的行为。
立即学习“前端免费学习笔记（深入）”；
- 嵌套层级越多，越容易误加在错误节点上
- 更稳妥的做法是扁平化结构：
<div class="card"><div class="card-content">...</div><button>操作</button></div> - 若必须保留容器（比如要控制按钮组间距），则该容器必须是卡片的直接子项，并设
display: flex+justify-content等
外层卡片网格需强制等高
即使每个卡片内部按钮都靠底了，不同卡片高度不一致，视觉上依然错位。关键在于外层容器（如 .card-grid）是否让所有卡片拉伸到相同高度。
- 给外层加
display: flex+flex-wrap: wrap后，必须配align-items: stretch（默认值，可省略），但前提是卡片没有height固定值干扰 - 卡片自身需设
min-height或height: 100%（配合父容器高度约束），否则内容少的卡片会塌缩，stretch失效 - Bootstrap 用户注意：
min-height必须加在.card上，不是.card-body；否则 Flex 布局无法基于统一高度分配空间
按钮内水平排布要用独立 Flex 容器
卡片底部按钮常不止一个，且需居中、两端对齐或等距分布。不能依赖外层卡片的 Flex 设置——那是控制标题/正文/按钮三段关系的，不是管按钮之间间距的。
- 给按钮容器（如
.card-footer）单独设display: flex - 用
justify-content: center居中，justify-content: space-between两端对齐（适合两个按钮），justify-content: flex-end靠右 - 优先用
gap控制按钮间距，别用margin——后者会干扰margin-top: auto的计算逻辑 - 按钮文字长度不一导致边缘参差？加
width: 100%+text-align: center强制等宽对齐，或用margin-left: auto靠右对齐（需卡片是flex-direction: column）
最易被忽略的一点：所有涉及高度分配的 Flex 行为，都依赖 box-sizing: border-box 统一。如果卡片或其子元素用了 box-sizing: content-box，内边距和边框会额外撑高，导致 margin-top: auto 推不到预期位置——检查并全局重置是必要的。
