直接用display:flex就能实现等高，但必须确保父容器是Flex上下文、卡片未设height/max-height/min-height、内部内容未用position:absolute或float脱离文档流——三者缺一不可。
直接用 display: flex 就能实现，但必须确保父容器是 Flex 上下文、卡片没锁死高度、内部内容没脱离文档流——三者缺一不可。
为什么加了 display: flex 还是不等高？
根本不是 Flex 失效，而是它“没东西可拉伸”：
- 父容器没设
display: flex（只给卡片自身加没用，得作用在直接包裹卡片的容器上） - 某张卡片写了
height、max-height或min-height（哪怕只是min-height: 200px都会打断拉伸） - 卡片里用了
position: absolute的标题或按钮，又没在卡片上配position: relative（脱离文档流的内容不参与高度计算） -
flex-direction: column被误设在父容器上（此时交叉轴是水平方向，align-items: stretch拉伸的是宽度，不是高度）
移动端单行卡片等高的最小可靠写法
适用于小屏并排 2–3 张的场景，防崩重点在收缩控制和截断：
- 父容器加
display: flex+gap，别用margin模拟间隙 - 每张卡片设
flex: 1+min-width: 0（防长 URL 或中文连续字符撑破布局） - 卡片内用
display: flex; flex-direction: column; height: 100% - 标题用
display: -webkit-box+-webkit-line-clamp: 2截两行，避免文字多的卡片顶高 - 底部按钮加
margin-top: auto吸底，别用position: absolute
换行后（flex-wrap: wrap）跨行不等高怎么办？
CSS 没法让不同行的卡片自动对齐高度，Flexbox 的 align-items: stretch 只在当前行内生效：
立即学习“前端免费学习笔记（深入）”；
- 不要把所有卡片塞进一个
display: flex; flex-wrap: wrap容器里 - 改用结构隔离：每 3 张包一层
.card-row，每层单独设display: flex和gap - 服务端或 JS 动态分组更稳妥，避免 CSS 在断点切换时重算错乱
- 如果必须用整页容器 flex-wrap，就接受“每行各自等高”，再靠
grid-auto-rows: minmax(16rem, auto)（配合 Grid 布局）统一视觉基线
真正容易被忽略的是：卡片内部的 height: 100% 依赖父容器有可计算高度；如果外层是流式布局且没设 min-height 或 h-100，这个 100% 就是 0 —— 所有内部 flex 拉伸都会失效。
