必须用flex-direction: column和flex: 1撑开主体内容，使按钮自然到底部；若未设column方向，margin-top: auto等均无效；标题容器需加min-width: 0防长文本溢出。
长标题把按钮顶出卡片，不是标题太长，而是卡片内部缺乏高度分配机制——必须用 flex: 1 让主体内容“撑开”可用空间，把按钮自然推到底部。
卡片容器必须是 column 方向的 flex 布局
这是所有操作的前提。如果 .card 没设 flex-direction: column，后续任何 margin-top: auto 或 flex: 1 都不会生效。
- 检查 computed styles 确认
flex-direction是column，别被高优先级规则覆盖 - 如果按钮套在
.card-content或.card-body里，flex-direction: column得加在它的直接父容器上，而不是最外层.card - 避免多层嵌套 wrapper：每多一层，flex 控制链就断一次
让标题区域用 flex: 1 占满剩余空间
不靠 height 或 min-height 硬撑，而是用 flex 分配逻辑强制留出底部空间。
- 给标题（或包裹它的容器）加
flex: 1，它会吸收卡片内所有未被按钮占用的垂直空间 - 按钮保持默认尺寸（
flex: 0 0 auto），无需额外设置margin-top: auto——此时它已被“顶”到底部 - 若标题内含长文本（如 URL、哈希值），需在标题元素上同步加
min-width: 0，否则 flex 不收缩，换行规则失效
防止长文本撑破标题容器
即使用了 flex: 1，一串无空格的长文本仍会让标题容器横向溢出，进而挤压按钮位置。
- 在标题元素上加
overflow-wrap: break-word+word-break: break-all（后者兜底） - 确保标题父容器有明确宽度约束，比如
max-width: 100%；否则浏览器无换行依据 - 检查是否继承了
white-space: nowrap（常见于 UI 框架组件），它会锁死所有换行行为
外层网格/列表容器要统一卡片高度
单张卡片内部对齐了，但多张并列时按钮仍错位？大概率是外层没拉齐卡片高度。
- 卡片父容器（如
.card-grid）用display: flex; flex-wrap: wrap，但不要设align-items: flex-end -
align-items: stretch才是默认行为，它依赖卡片子项启用flex: 1后的真实高度来拉齐 - 响应式换行后跨行不对齐是正常现象；CSS 无法原生解决，业务强依赖时需 JS 计算最大高度并注入 inline style
真正卡住的往往不是 flex 写法本身，而是哪一层漏掉了 flex-direction: column，或者哪一级标题容器没加 min-width: 0 ——这两处任一缺失，都会让整个高度分配逻辑失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
