卡片默认不是顶部对齐，因Flex容器默认align-items: stretch仅在父容器有明确高度时才拉伸等高，否则各卡片按内容撑高导致参差；设align-items: flex-start仅解决卡片顶部对齐，但内部按钮仍需结合flex-direction: column、flex: 1占满内容区及margin-top: auto才能真正沉底对齐。
为什么卡片默认不是顶部对齐
Flex容器默认 align-items: stretch，它会让所有卡片在交叉轴（垂直方向）上拉伸到同一高度——前提是父容器有明确高度或能被内容撑开。但多数卡片网格的父容器高度是“由内容决定”的，stretch 实际失效，结果就是每张卡片按自己内容撑高，视觉上参差不齐，看起来像“底部悬空”或“标题起始线错位”。
直接设 align-items: flex-start 就够了吗
够，但只解决了一半问题。它确实让所有卡片顶部对齐，可内部文字、图片仍可能上下浮动，尤其当卡片里有标题+描述+按钮这种结构时：
- 标题短的卡片，描述会“上浮”，按钮紧贴描述下方
- 标题长的卡片，描述被往下挤，按钮位置下沉
- 最终效果是：卡片顶部对齐了，但内部关键元素（如按钮）仍没对齐
所以真正要做的，是「卡片整体顶部对齐 + 内部内容区域弹性占满 + 按钮钉到底部」。
卡片内部怎么让按钮沉底且不破坏文字对齐
关键不在 margin-top: auto 本身，而在它生效的前提是否满足。必须同时满足以下三点：
立即学习“前端免费学习笔记（深入）”；
-
.card设display: flex; flex-direction: column;且有明确高度参考（比如min-height: 240px或父级给了height: 100%） -
.card-body（装文字和按钮的容器）设flex: 1; display: flex; flex-direction: column; - 按钮所在元素加
margin-top: auto（不是align-self: flex-end，后者依赖父级align-items，更难控）
示例结构：
.card {
display: flex;
flex-direction: column;
min-height: 240px;
}
.card-body {
flex: 1;
display: flex;
flex-direction: column;
}
.card-footer {
margin-top: auto;
}
容易被忽略的兼容性与结构陷阱
这些点不处理，flex-start 可能白设：
- 父容器用了
float或inline-block—— Flex 布局必须是纯display: flex上下文，混用会退化为文档流行为 - 卡片内图片没约束尺寸：
img缺少max-width: 100%; height: auto;，可能撑破卡片高度，破坏对齐基准 - 文字截断没做：
-webkit-line-clamp仅限 WebKit，若需多行限制且兼容 Firefox/Edge，得用line-clamp（现代支持已好）或 JS fallback - IE11 下
flex-wrap和gap失效，如果必须支持，得加display: -ms-flexbox前缀，并放弃gap改用margin（注意换行时 margin 折叠问题）
最常漏掉的是：忘了给卡片加 min-height。没有这个，flex: 1 和 margin-top: auto 都找不到“剩余空间”去分配。
