卡片默认不等高是因为align-items: stretch需父容器有明确高度且子项无height/min-height限制；父容器height: auto时，各卡片按内容撑高导致底部参差、按钮错位。
为什么卡片默认不等高也不对齐
Flex容器默认align-items: stretch，但它只在父容器有明确高度约束、且子项没设height/min-height时才真正拉伸。多数卡片网格的父容器是height: auto，stretch就失效了——每张卡片按自己内容撑高，顶部看似对齐，底部却参差不齐，按钮位置更没法统一。
让卡片整体顶部对齐的关键设置
直接给父容器加align-items: flex-start就能解决顶部错位问题，但必须满足前提：
- 父容器必须是纯
display: flex上下文，不能混用float或inline-block - 所有卡片不能脱离文档流（比如
position: absolute或float） - 卡片内部图片要加
max-width: 100%和height: auto，否则会撑破高度基准
怎么让内部按钮真正沉底对齐
margin-top: auto不是万能的，它只在父级是flex-direction: column且有可用空间时生效：
-
.card必须设display: flex; flex-direction: column;并带高度约束（如min-height: 240px或父容器有height） - 文字区域得用独立容器包裹（比如
.card-body），并设flex: 1 - 按钮元素直接加
margin-top: auto，别用align-self: flex-end——后者依赖父级align-items，容易失控
Flex方案下跨行卡片高度不一致怎么办
Flex的align-items: stretch只作用于同一行内元素，跨行不联动。如果卡片换行后依然错位：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
align-content: flex-start，防止多行被垂直拉散 - 每个卡片加
height: 100%（前提是父容器有高度参考，比如min-height: 100vh或嵌套在Grid中） - 更稳妥的做法是换用
display: grid：父容器设grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，Grid天然同列等高，不用额外hack
white-space: normal + overflow: hidden + text-overflow: ellipsis必须配合display: -webkit-box或现代line-clamp，否则长文本会顶高卡片，前面所有对齐都白做。 
