卡片按钮不居底需先设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></button> 不是 .card 的直接子项，margin-top: auto 加在 button 上无效。
正确做法是把弹性行为下推一层：
- 给
.card-actions加margin-top: auto（前提是它已是.card-content的直接子元素） - 或者让
.card-content成为 flex 容器，并设justify-content: space-between，把<h3>+</h3> <p></p>包进一个<div>，按钮单独作为最后一个子元素<li>避免多层嵌套 div 套 button，每多一层，定位控制就多一重断裂风险</li> <h3>网格中卡片高度不一致？min-height 和 align-items: stretch 缺一不可</h3> <p>即使每个卡片内部按钮都到底了，视觉上还是错位——这是外层网格（比如 <code>.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></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; }能省掉大半调试时间。 -
