卡片按钮居底需设flex-direction: column；按钮须为卡片直接子元素；按钮容器需单独设flex布局控制间距；卡片父容器应设align-items: stretch并配合min-height确保等高。
卡片本身是 Flex 容器，但按钮仍浮动不居底
常见错误是只给外层卡片设 display: flex，却没指定 flex-direction: column。Flex 默认主轴是水平方向（row），此时 justify-content 控制的是左右对齐，跟“底部”无关。
必须显式声明垂直流向，否则 margin-top: auto 或 align-self: flex-end 都不会生效：
-
flex-direction: column是前提，没有它，所有“推到底部”的操作都无效 - 若卡片高度由内容撑开（无
height或min-height），align-items: stretch实际不起作用——子项不会被拉伸，自然也无法靠底对齐 - 按钮必须是卡片的**直接子元素**；如果按钮嵌套在
<div><div><button></button></div></div>里，margin-top: auto要加在最外层那个<div>上，而不是<button>
按钮容器内部还要水平排布，怎么嵌套 Flex
按钮本身需要居中、两端对齐或等距分布时，不能只靠外层卡片的 Flex 设置——那是控制卡片内三段结构（header/body/footer）的，不是控制按钮之间的间距。
正确做法是：让按钮所在区域（比如 .card-footer）自己成为 Flex 容器：
立即学习“前端免费学习笔记（深入）”；
-
.card-footer { display: flex; justify-content: center; gap: 0.5rem; }—— 水平居中 + 间距 - 若按钮数量动态，用
justify-content: space-between更稳，避免最后一行只剩一个按钮时左右空荡 - 别在按钮上直接设
margin来调位置；Flex 容器内用gap更可控，且不干扰margin-top: auto的计算逻辑
为什么 align-self: flex-end 有时不管用
这个属性只在父容器是 Flex 且主轴方向明确时才有效。它常被误用于两种场景：
- 父容器是
flex-direction: row，却想让按钮“沉到底部”——此时交叉轴是垂直方向，align-self: flex-end确实能对齐底部，但前提是卡片有固定高度，否则按钮只是贴着自身容器底边，而非整个卡片视觉底部 - 按钮不在卡片的直接子级里，而是套了多层
<div>——align-self只作用于 Flex 项目的直接子项，嵌套层级会中断作用链 - 更隐蔽的坑：
box-sizing: border-box没统一，导致内边距/边框影响实际高度计算，按钮看起来偏高或偏低
响应式下卡片高度不一致，底部还是错位
这通常不是按钮的问题，而是外层网格容器没处理好“等高”逻辑。即使每个卡片内部按钮都靠底了，不同卡片高度不同，视觉上依然参差。
关键在卡片的父容器（比如 .card-grid）：
- 必须设
display: flex; align-items: stretch;，否则卡片各行之间互不影响高度 - 每张卡片需设
min-height（如min-height: 240px），仅靠height: 100%在 flex-wrap 下不可靠 - 小屏换行后，
align-items: stretch只对同一行内的卡片生效；跨行对齐需 JS 辅助或改用 CSS Grid
真正容易被忽略的一点：字体大小、行高、图片加载失败 fallback 高度不一致，都会悄悄破坏卡片视觉等高——这些细节比布局属性更难调试。
