卡片容器必须设 display: flex 且 flex-direction: column，否则 margin-top: auto 和 justify-content: space-between 无效；按钮需为直接子元素；外层需 align-items: stretch；box-sizing 必须为 border-box。
卡片容器必须设 display: flex 且 flex-direction: column
不加 flex-direction: column，margin-top: auto 或 justify-content: space-between 全部失效。Flex 默认主轴是水平方向（row），此时“底部”属于交叉轴，margin-top 不参与分配，justify-content 控制的是左右而非上下。
常见错误写法：.card { display: flex; } —— 看似用了 Flex，但按钮依然浮在内容下方，无法到底部。
- 正确写法必须显式声明：
.card { display: flex; flex-direction: column; } - 如果卡片有固定宽高（如
width: 300px; height: 400px;），flex-direction: column是唯一能激活垂直空间分配的前提 - 响应式中若用
min-width+flex: 1，仍需此声明，否则换行后高度计算错乱
按钮必须是卡片的直接子元素，且用 margin-top: auto
margin-top: auto 只在 Flex 容器的**直接子项**上生效。它会把该子项推到容器侧轴（垂直时即底部）末端，前提是父容器已启用 flex-direction: column。
典型结构误用：
立即学习“前端免费学习笔记（深入）”；
<div class="card"> <h3>标题</h3> <p>描述</p> <div class="actions"><button>操作</button></div> </div>
这里 <button></button> 不是 .card 的直接子元素，margin-top: auto 加在 button 上无效；加在 .actions 上才起作用——但更稳妥的是扁平化：
- 推荐结构：
<div class="card"> <h3>...</h3> <p>...</p> <button>操作</button> </div> - 对应样式：
.card button { margin-top: auto; } - 若必须保留容器（如多个按钮需间距），则
.actions必须是.card的直接子元素，并设display: flex+gap控制内部对齐
外层网格需 align-items: stretch（默认值，但别覆盖）
即使每张卡片内部按钮都靠底了，若卡片自身高度不一致，视觉上仍是错位的。align-items: stretch 是 display: flex 容器的默认行为，它会让所有卡片在侧轴（垂直方向）拉伸至等高——但这个效果会被以下情况破坏：
- 卡片设置了
height固定值（如height: 300px），覆盖了 stretch 行为 - 卡片设置了
align-self: flex-start等显式对齐值 - 外层容器未设
display: flex或用了grid却没配align-content: start
安全做法：
- 外层卡片容器（如
.card-grid）设display: flex; flex-wrap: wrap; gap: 1rem; - 不显式写
align-items，依赖默认stretch - 给卡片加
min-height: 200px或height: 100%（配合父容器有高度约束）防塌缩
按钮文字长度不一导致水平边缘参差，需单独处理
底部对齐解决了垂直问题，但按钮宽度自适应会导致左右边缘不齐——这不是 Flex 的 bug，而是 width: auto 的自然表现。
根据设计需求选一种：
- 强制等宽居中：
button { width: 100%; max-width: 120px; text-align: center; } - 右对齐（适合“查看详情”类按钮）：
.card button { margin-left: auto; }（需卡片是flex-column） - 多按钮水平分布：
.card-actions { display: flex; justify-content: space-between; gap: 0.5rem; }，且.card-actions是卡片直接子元素
别在按钮上用 margin-left / margin-right 手动调位置，会干扰 margin-top: auto 的剩余空间计算逻辑。
最易被忽略的一点：所有卡片的 box-sizing 必须统一为 border-box，否则内边距、边框会影响高度计算，导致按钮看起来偏高或底部留白不均。
