卡片底部按钮无法对齐的根本原因是内容高度不一导致卡片高度参差，需用flex-column+flex:1撑满主体并让按钮自然到底部，而非依赖align-items:flex-end或孤立使用margin-top:auto。
卡片高度不一致时，底部按钮无法对齐
Flex 布局本身不会自动拉伸子元素高度来对齐底部内容——align-items: stretch 只对直接子项生效，且前提是父容器有明确高度或子项未设 height。卡片内容长短不同，导致卡片高度参差，按钮自然“浮”在各自底部，视觉上错位。
关键不是让按钮“靠底”，而是让卡片内部形成统一的垂直布局结构：
- 给每张卡片设置
display: flex和flex-direction: column - 让卡片主体内容（如标题、描述）用
flex: 1占满剩余空间，把按钮“顶”到最底 - 确保卡片父容器（如
.card-grid）用display: flex+flex-wrap: wrap，但不要设align-items: flex-end——这只会把整张卡片往下压，不是按钮对齐
为什么不能只用 margin-top: auto？
可以，而且很常用，但容易漏掉前提条件：必须保证卡片内部是 Flex 容器，且按钮是直接子元素。否则 margin-top: auto 无效。
典型错误写法：
<div class="card"> <h3>标题</h3> <p>描述文字...</p> <div class="btn-wrapper"><button>操作</button></div> </div>
这里 .btn-wrapper 是嵌套层，margin-top: auto 加在 button 上不起作用；加在 .btn-wrapper 上才有效——但更稳妥的做法是去掉这一层，让 button 成为卡片的直接子项。
响应式下卡片换行时底部对齐失效
当卡片在小屏换行（flex-wrap: wrap），同一行卡片高度由该行最高卡片决定，但不同行之间没有联动。此时“底部对齐”仅限于每行内部，跨行不对齐是正常行为，CSS 无法原生解决。
如果业务强依赖跨行对齐，有两个务实选择：
- 用 JavaScript 扫描每行卡片，取最大高度后统一设
min-height（注意避免重排） - 改用 CSS Grid，用
grid-template-rows: 1fr配合align-content: start，再对每格内按钮用margin-top: auto - 接受视觉误差，用
gap和足够留白降低错位感知
按钮文字长度差异导致水平位置不齐
即使底部对齐了，按钮文字长短不一，左右边缘也会参差。这不是 Flex 的问题，而是按钮默认 width: auto 的表现。
解决方式取决于设计需求：
- 强制等宽：
button { width: 100%; max-width: 120px; }，配合text-align: center - 保持自适应但对齐右边缘：
button { margin-left: auto; }（需卡片内为 flex column） - 用
justify-content: center或justify-content: flex-end控制按钮在卡片宽度内的水平位置
别忘了给按钮加 box-sizing: border-box，避免 padding 影响宽度计算。
真正麻烦的不是怎么对齐，而是得同时盯住卡片高度、内部 flex 结构、按钮定位、响应式断点、文字截断这几个变量——动其中任何一个，都可能让底部按钮悄悄偏移一像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
