卡片换行后各行高度不一致是Flexbox设计限制，align-items: stretch仅作用于单行内子项，换行后每行独立拉伸；Grid方案用grid-template-rows: 1fr可强制所有行等高，需配合align-self: stretch和容器清样式。
卡片在换行后各行高度不一致，不是 CSS 写错了，而是 Flexbox 本身就不支持跨行等高——align-items: stretch 只作用于单行内子项，换行后每行各自找最高卡片拉伸，视觉上就“错层”了。
Flexbox 换行后为什么各行卡片高度不一致
这是 Flexbox 的设计限制：一旦启用 flex-wrap: wrap，浏览器就把每一行当作独立的 flex 行处理。align-items: stretch 只在当前行生效，不会跨行对齐。比如第一行最高卡片是 200px，第二行最高是 180px，那两行底部就天然错位。
- 常见错误现象：
devtools里看到不同行的li或.card元素高度不同、hover 时上下浮动、底部按钮横向错位 - 别指望
align-content: stretch——它只控制行与行之间的间距分配，不拉伸行高 - 加
height: 100%到卡片上反而会破坏拉伸逻辑，因为卡片没继承到明确的父高度上下文
Grid 方案：用 grid-template-rows: 1fr 强制等高
Grid 是目前最稳的解法，它天然支持二维对齐，grid-template-rows: 1fr 让所有行轨道高度一致，卡片自动填满对应轨道。
-
ul或容器必须设display: grid，并清除默认样式：list-style: none; padding: 0; -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))控制列数，和行高解耦 -
grid-template-rows: 1fr是关键——不是minmax()，也不是auto，就是1fr -
li或卡片需设align-self: stretch，否则可能收缩（尤其内容少时）
Flexbox 场景下怎么补救
如果项目已用 Flexbox 且不能改结构，只能靠 DOM 分组或 JS 补丁，没有纯 CSS 跨行等高方案。
立即学习“前端免费学习笔记（深入）”；
- 结构上把卡片按每行数量分组，例如每 3 张包一层
div，每组单独设display: flex - 避免在卡片内用
position: absolute，否则脱离文档流，高度计算失效；改用margin-top: auto推按钮到底部 - IE11 下
align-items: stretch不可靠，得加前缀-ms-flex-align: stretch或用 JS 遍历取最大offsetHeight统一设min-height
响应式切换列数时容易忽略的坑
媒体查询里改列数，很多人只调 flex-basis 或 grid-template-columns，却忘了同步重置行高约束。
- Grid 方案中，
grid-template-rows: 1fr在所有断点下都得保留，不能删 - Flexbox 分组方案里，每组卡片数量要随断点动态调整，否则某组只剩 1 张卡，整行就塌了
- 卡片内文字溢出要用
text-overflow: ellipsis+display: -webkit-box，否则长文本顶高卡片，破坏等高效果
真正难的不是让卡片看起来一样高，而是让它们在不同内容、不同断点、不同浏览器下都保持一致——Grid 的 1fr 行轨道是目前最接近“开箱即用”的解法，但前提是别漏掉 align-self: stretch 和容器清样式这两步。
