卡片高度不一致需检查三处硬性条件：父容器设display: flex、卡片未设height/max-height/min-height、内部内容未用position: absolute或float脱离文档流。
为什么卡片高度不一致？先检查这三处硬性条件
Flex 容器里子元素默认会等高，但 align-items: stretch 不是“一加就灵”的开关。它只在三个前提同时满足时才生效：父容器设了 display: flex、卡片本身没写 height/max-height/min-height、卡片内部内容没用 position: absolute 或 float 脱离文档流。
常见错误包括：
- 只给
.card加display: flex，但忘了给它的父容器加 —— 这样根本没启用 Flex 上下文 -
.card写了min-height: 200px，哪怕只是为防塌陷，也会打断拉伸逻辑 - 标题或按钮用了
position: absolute，又没配position: relative在卡片上，导致它们不参与高度计算，视觉上留白
卡片内底部按钮固定对齐，别用 position: absolute
文字少的卡片按钮“上浮”，不是高度不够，是内容没锚定。强行设 height 反而破坏响应性，且在不同字体/行高下不可靠。
正确做法是让卡片内部也走 Flex 垂直流：
-
.card加display: flex、flex-direction: column、height: 100% - 标题和描述保持正常文档流（不设
height、不加position） - 按钮加
margin-top: auto，自动吸到底部
这样即使某张卡片只有两行字，按钮位置也和其他卡片一致，等高感更强。
flex-wrap 换行后跨行不等高？得靠 DOM 分组解决
flex-wrap: wrap 启用后，浏览器把换行后的卡片当新“行”处理，align-items: stretch 只在当前行内生效。结果就是每行各自找最高卡片拉伸，跨行不对齐。
纯 CSS 没法跨行对齐 —— Flexbox 就没这个能力。可靠解法是结构隔离：
- 用 JS 或服务端按每 N 张卡片包一层
.card-row（例如每行 3 张） - 每个
.card-row单独设display: flex和gap - 避免整页容器直接
flex-wrap，那是自找麻烦
不要指望媒体查询里改 flex-direction 到 column 后 align-items 还管高度 —— 那时它控制的是主轴对齐，得换用 align-content 或重设计逻辑。
IE11 下 align-items: stretch 不稳定，别硬扛
IE11 对嵌套 Flex 或含 flex: 1 的场景，align-items: stretch 经常失效，尤其卡片内再套 Flex 时容易塌高。
务实方案只有两个：
- 加前缀：
display: -ms-flexbox、-ms-flex-align: stretch - JS 补丁：遍历所有卡片，取
offsetHeight最大值，统一赋给每张卡片的style.height
Grid 的 grid-auto-rows: 1fr 在 IE 中完全不识别，所以真要全兼容 IE11，Flex + 前缀仍是唯一可行路径。最易被忽略的是：响应式断点切换时的等高重算 —— 它不会自动触发，得靠 JS 监听 resize 或用 ResizeObserver 主动干预。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
