align-items: stretch 不让卡片底部对齐，因为它使子项在交叉轴拉伸填满容器高度，而非对齐底部；真正解法是给卡片内需钉底的元素设 margin-top: auto。
为什么 align-items: stretch 没让卡片底部对齐
因为 align-items: stretch 是让子项在**交叉轴上拉伸填满容器高度**，不是“把底部钉在一行”。如果卡片内容高度不一致，又没设固定高度或最小高度，拉伸确实会发生——但前提是父容器在交叉轴（比如 flex-direction: row 时是垂直方向）有明确高度约束。多数情况下，flex 容器高度由内容撑开，stretch 实际无效果。
卡片底部对齐的真正解法：用 margin-top: auto
这是最轻量、兼容性好、不依赖 JS 的方案。原理是：给卡片内需要“钉到底部”的元素（比如按钮、文字块）设置 margin-top: auto，它会自动吸收上方剩余空间，把该元素推到容器底端。
- 只作用于 flex 子项内部的直接子元素，不是卡片本身
- 要求卡片自身是 flex 容器（
display: flex; flex-direction: column;） - 不需要知道内容高度，也不强制设
min-height - 比
align-items: flex-end更可控——后者会让整个卡片上移，破坏顶部对齐
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-footer {
margin-top: auto;
}
什么时候才该用 align-items: stretch + 固定高度
仅当所有卡片必须**视觉上等高**，且你愿意为容器设定明确高度（或最小高度）时才适用。例如后台管理列表、产品网格页等强一致性场景。
- 父容器（如
.card-grid）需设display: flex; align-items: stretch; - 每个卡片必须设
min-height或height，否则 stretch 无效 - 注意响应式断点：小屏下卡片内容换行可能导致高度突变，
min-height值要留余量 - IE11 对
stretch支持有 bug，若需兼容，优先选margin-top: auto方案
.card-grid {
display: flex;
gap: 1rem;
align-items: stretch;
}
.card {
min-height: 200px; / 关键：必须有高度约束 /
}
容易被忽略的 flex 容器陷阱
很多底部不对齐问题，其实根子不在卡片，而在外层布局没处理好：
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap下，不同行的卡片不会跨行对齐——底部对齐只在**同一 flex 行内有效** - 卡片用了
float或position: absolute，会脱离 flex 流，align-items对其完全失效 - 父容器设置了
align-content: flex-start（默认值），多行时行与行之间没间距，但每行内部仍可独立对齐 - 字体、行高、内边距等未归一化，导致“看起来没对齐”，实际是 baseline 或 box-sizing 差异
底部对齐这件事，关键不在“拉伸”，而在“分配剩余空间”。margin-top: auto 是 flex 布局里最被低估的对齐利器，比硬调 align-items 更精准、更少副作用。
