display: flex未生效主因是父容器缺高度约束且子项未设flex: 1；需确保父容器有min-height或height，子项用flex: 1 1 auto防塌缩，IE11需加-ms前缀并避免flex-basis: auto。
卡片高度不一致时，display: flex 为什么没生效
常见现象是父容器加了 display: flex，子项却还是参差不齐。根本原因通常是父容器没设 height 或 min-height，而 flex 项默认按内容撑高，不主动拉伸。
- 确保父容器有明确的高度约束，比如
min-height: 200px或继承自父级的height: 100% - 子项必须加
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），否则不会均分剩余空间 - Bootstrap 5 的
.card默认是块级元素，需显式移除height: auto干扰（某些版本会设）
Bootstrap 4/5 中启用卡片等高，该改哪几个类
Bootstrap 自带 .card-deck（v4）和 .row > .col > .card（v5）两种主流布局，但默认都不强制等高——得靠 flex 配合。
- v4：
.card-deck内部已用display: flex，只需确保子.card没设固定height，并加flex: 1 - v5：推荐用
.row+.col，然后给.row加style="display: flex; flex-wrap: wrap"（它默认就是 flex，但部分旧项目可能被重置） - 关键补丁：给每个
.card加style="flex: 1 1 auto"，避免内容少的卡片塌缩
flex: 1 和 flex: 1 1 auto 在卡片里差别大不大
差别就在“内容少时是否保持最小可用高度”。flex: 1 是简写，等价于 flex: 1 1 0%，意味着基线为 0，容易被压缩到文字行高；而卡片通常需要保留头部、body 区域的视觉完整性。
- 用
flex: 1 1 auto更稳妥——flex-basis: auto表示按内容自然尺寸起步，再分配剩余空间 - 如果卡片内有
.card-img-top，且图片加载慢，flex-basis: 0可能导致布局跳动；auto能缓解 - 兼容性无差异：两者在 Chrome/Firefox/Edge 90+ 和 Safari 14.1+ 均支持良好
遇到 IE11 兼容需求，还能用 flex 实现等高吗
能，但要避开现代语法。IE11 支持老版 flexbox（display: -ms-flexbox），但不支持 flex: 1 1 auto 的简写，也不识别 flex-basis: auto。
立即学习“前端免费学习笔记（深入）”；
- 必须写全前缀：
display: -ms-flexbox; display: flex - 子项用
-ms-flex: 1; flex: 1，不要写flex-basis相关值 - 避免在卡片上设
min-height，IE11 对 flex 子项的min-height解析不稳定 - 若仍错位，可临时加
height: 100%到卡片，配合overflow: hidden防撑破
flex-basis 被误设为 0。 
