卡片高度不一致常见，因align-items: stretch需同时满足：flex-direction为row、容器有明确高度、子项未设height/min-height等限制；任一条件不满足即失效。
为什么卡片高度不一致是个常见问题
Flex容器里子元素默认会按内容撑开高度，align-items: stretch 虽然默认生效，但一旦某个卡片内部有 margin、padding、border 或设置了 min-height/height，就可能破坏拉伸行为。更隐蔽的是：如果卡片里用了 display: flex 或 display: grid 作为内部布局，而没设 height: 100%，内部元素也不会“继承”父级拉伸后的高度。
align-items: stretch 生效的三个前提
它不是万能开关，必须同时满足：
-
flex-direction是row（默认值），且容器高度未被限制死（比如没写height: 200px） - 卡片本身没设置
height、max-height或min-height（哪怕只设了min-height: auto都可能干扰） - 卡片内部所有直接子元素（如标题、描述、按钮）不能用
position: absolute或float脱离文档流——否则它们不参与高度计算，拉伸后留白
实际写法中容易漏掉的两处关键
很多人写了 display: flex 和 align-items: stretch 还是不等高，问题常出在这：
- 忘记给卡片容器加
flex: 1或flex-grow: 1：仅靠align-items拉伸的是“行内高度”，但卡片自身若没声明可伸缩，浏览器仍按内容分配空间 - 卡片内部文字溢出没处理：
white-space: normal+overflow: hidden+text-overflow: ellipsis必须配合display: -webkit-box或固定行数限制，否则长文本会把卡片顶高，破坏等高效果
兼容性与替代方案提醒
align-items: stretch 在 IE10+ 和所有现代浏览器都支持，但 IE10/11 对 min-height 在 Flex 子项上的解析有 Bug，建议避免混用。如果必须支持老版本，可用 JS 补丁：遍历卡片取 offsetHeight 最大值，再统一设 min-height；不过这会触发重排，不如纯 CSS 可靠。真正难处理的其实是响应式断点切换时的等高重算——媒体查询里改 flex-direction 到 column 后，align-items 就不管高度了，得换用 align-content 或重新设计布局逻辑。
立即学习“前端免费学习笔记（深入）”；
