Flex卡片等高需确保父容器display: flex且flex-direction: row，子项不设height、align-self等覆盖属性，并配合flex: 1、文本截断和margin-top: auto实现视觉统一；Grid方案更适用于多行等高场景。
卡片列表高度不一致？align-items: stretch 默认就生效
Flex 容器里子项默认就是 align-items: stretch，只要父容器没设固定高度、子项没设 align-self 覆盖，卡片自然等高。很多人卡在“为什么没效果”，其实是忘了给父容器加 display: flex 或用了 flex-direction: column —— 后者会让 stretch 作用于宽度而非高度。
- 确保父容器是
display: flex且flex-direction: row（默认值） - 子卡片不能设
height、max-height或align-self: flex-start/center，否则会脱离拉伸逻辑 - 如果卡片内有图片或标题行数不固定，需配合
min-height或flex: 1让内容区主动撑开
文字截断+等高卡片：别只靠 align-items
align-items: stretch 只控制容器内对齐行为，不解决内部文本溢出或空白分配问题。卡片视觉“等高”但内容区域参差，用户会觉得不整齐。
- 给卡片内容区（如
.card-body）加flex: 1，让它占满剩余空间 - 标题用
display: -webkit-box+-webkit-line-clamp截两行，避免高度被长标题带偏 - 底部操作区（按钮等）设
margin-top: auto，自动吸附到底部，强化视觉对齐感
Grid 替代方案：更可控的等高填充
Flex 的 stretch 在多行换行（flex-wrap: wrap）时会失效——每行各自等高，跨行不一致。这时改用 display: grid 更稳。
- 父容器设
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) - 所有卡片默认按网格轨道等高，无需额外对齐声明
- 兼容性注意：IE11 需用
-ms-grid前缀，且不支持auto-fill，得手动写列数
调试时常见错误：检查这三处
等高失效往往不是 align-items 本身的问题，而是被其他样式静默覆盖。
- 父容器有
align-items: flex-start—— 检查是否从重置 CSS 或组件库继承而来 - 卡片设置了
vertical-align: top（对 inline-flex 子项无效，但容易误加） - 卡片用了
position: absolute或float，直接脱离 flex 流，stretch完全不触发
最简单的验证方式：临时给父容器加 outline: 1px solid red，再给卡片加 outline: 1px solid blue，一眼看出是否真正拉伸到了容器高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
