卡片按钮不居底需先设flex-direction: column；若按钮非直接子元素，应将margin-top: auto加在其父容器上；外层网格需align-items: stretch或grid-template-rows: 1fr确保卡片等高；按钮排布用gap而非margin；全局box-sizing: border-box避免尺寸偏差。
卡片内部按钮不居底？先检查 flex-direction 是否为 column
按钮在卡片里“浮”在中间或随内容高度变化，大概率是因为卡片容器没设 flex-direction: column。Flex 默认是 row，此时 justify-content 控制左右，margin-top: auto 或 align-self: flex-end 都不会推到底部。
必须显式声明垂直流向：
-
.card { display: flex; flex-direction: column; }是前提，缺它一切对齐逻辑失效 - 如果卡片还套了
.card-body这类 wrapper，那flex-direction: column得加在它身上，而不是外层.card - 用浏览器开发者工具检查 computed styles，确认
flex-direction确实是column，别被 CSS 优先级覆盖
按钮不是卡片直接子元素？那就得把 margin-top: auto 加到它的父容器上
常见结构是 <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 上无效。
正确做法是把弹性行为下推一层：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给
.card-actions加margin-top: auto（前提是它已是.card-content的直接子元素） - 或者让
.card-content成为 flex 容器，并设justify-content: space-between，把<h3>+<p>包进一个<div>，按钮单独作为最后一个子元素 - 避免多层嵌套 div 套 button，每多一层，定位控制就多一重断裂风险
网格中卡片高度不一致？min-height 和 align-items: stretch 缺一不可
即使每个卡片内部按钮都到底了，视觉上还是错位——这是外层网格（比如 .row 或 display: grid）没统一卡片高度导致的。
关键不是“让按钮到底”，而是“让所有卡片等高，再让按钮到底”：
-
.card { min-height: 280px; }比固定height更安全，能容纳更多内容而不溢出 -
.row { align-items: stretch; }（Bootstrap 5+ 默认已启用）确保子卡片拉伸填满行高 - 若用 CSS Grid，给卡片容器设
grid-template-rows: 1fr，比依赖min-height更灵活 - 注意：如果卡片里用了
position: absolute或float，会脱离文档流，align-items: stretch失效
按钮水平排布乱？别在 button 上调 margin，用 flex-gap 统一控制
多个按钮并排时，有人习惯给每个 <button> 加 margin-right，结果响应式断点一变就错位、换行后间距异常。
按钮区域本身该是独立 Flex 容器：
.card-actions { display: flex; justify-content: center; gap: 0.5rem; }-
gap自动处理换行间距，且不干扰margin-top: auto的计算 - 要两端对齐按钮（如“取消”左、“确认”右），用
justify-content: space-between，别靠margin-left: auto推单个按钮 - 避免同时用
gap和margin，容易叠加导致间距翻倍
最常被忽略的一点：box-sizing 没统一。如果卡片或按钮用了 box-sizing: content-box，而其他地方是 border-box，内边距和边框会吃掉预期高度，按钮看起来就是“差那么几像素”没到底。全局重置一句 * { box-sizing: border-box; } 能省掉大半调试时间。
