卡片高度不一致的根本原因是未启用容器级布局控制，必须用Flex或Grid替代文档流；align-items: stretch失效常见于子项设height/min-height、内部absolute定位脱离文档流、父容器缺明确高度上下文；实操需父容器display: flex+flex-wrap+align-items: stretch，卡片内用flex-column+flex: 1+margin-top: auto，或Grid配grid-auto-rows: 1fr+min-height: 0。
卡片高度不一致不是样式没写对，而是你还在用文档流或浮动硬扛——必须切换到容器级控制逻辑，否则调 min-height、height 都是徒劳。
align-items: stretch 为什么没效果
它只在 display: flex 或 display: grid 容器上生效，且极易被以下三点打断：
- 某张卡片写了
height、max-height或min-height（哪怕只是min-height: auto） - 卡片内部用了
position: absolute的标题/按钮，导致内容脱离文档流、不参与高度计算 - 父容器没设明确高度上下文（如
min-height），尤其在grid-auto-rows: 1fr下会坍缩为 0
检查方式：打开开发者工具，选中“矮卡片”，看 align-self 是否为 auto，height 和 max-height 是否为 auto。
Flex 布局下真正等高的实操写法
别只给卡片加 display: flex，要让所有卡片处于同一容器，并满足拉伸前提：
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex+flex-wrap: wrap+align-items: stretch - 每张卡片加
flex: 1 0 calc(33.333% - 1rem)（避免margin破坏宽度计算） - 卡片内部用
display: flex+flex-direction: column，描述区加flex: 1，按钮加margin-top: auto - 统一图片样式：
img { height: 100%; object-fit: cover; }，并确保其父容器有明确高度
注意：flex-wrap 启用后，不同行之间不会对齐——需按每行 N 张手动包裹，例如 <div class="card-row">...</div>，每个 .card-row 单独设 display: flex。
Grid 布局更稳的等高方案
用 grid-auto-rows: 1fr 比依赖 align-items: stretch 更可靠，尤其响应式场景：
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 1rem; }- 必须给卡片加
min-height: 0，防止内部 flex 因 shrink 行为干扰高度计算 - 卡片内文字截断用
display: -webkit-box+-webkit-line-clamp: 2，而非仅靠overflow: hidden - 所有图片包裹在固定宽高比容器里，如
.card-image { aspect-ratio: 4/3; overflow: hidden; }
如果卡片数量少于一行容量，grid-auto-rows: 1fr 可能失效——此时改用 grid-template-rows: 1fr 并配合 min-height 设最小容器高度。
IE11 兼容的底线方案
别指望 align-items: stretch 在 IE11 稳定工作，务实做法只有两个：
- 降级用前缀：
display: -ms-flexbox; -ms-flex-align: stretch;，并避免嵌套 flex - JS 补丁：遍历所有卡片，取
offsetHeight最大值，统一赋给每张卡片的style.minHeight
但要注意：JS 方案会触发重排，且响应式断点切换时需重新计算——真正难处理的不是初始渲染，而是窗口 resize 后的动态重算。
