父容器必须设 display: flex 才能实现卡片等高，align-items: stretch 默认生效；卡片内禁用 height/min-height/position: absolute；多行等高需用 grid 或分组 flex；ie11 需加前缀或 js 补丁。
父容器必须设 display: flex，不能只给卡片加
很多人写完 .card { display: flex; } 就以为能等高，结果没用——等高是容器级行为，不是卡片自己能决定的。align-items: stretch 只在 flex 容器上生效，且默认就是这个值，无需显式写。关键看外层：.card-container { display: flex; } 才是起点。如果父容器是 block 或 grid，哪怕卡片内部再套一层 flex，也和等高无关。
card 里别写 height、min-height 或 position: absolute
这些都会破坏拉伸逻辑：
-
height: 200px或max-height: 300px会锁死自身高度，stretch失效 -
min-height虽然不完全阻止拉伸，但可能让短卡片“撑高”，反而导致视觉错位 -
position: absolute的标题/按钮脱离文档流，内容区不再参与高度计算，卡片实际高度只剩 padding 和边框
真正要控制底部对齐，用 .card { display: flex; flex-direction: column; } + .card-footer { margin-top: auto; }，而不是靠定位“粘”到底部。
多行布局时，flex-wrap: wrap 不会跨行等高
这是最容易误判的点：flex-wrap: wrap 后，第一行三张卡片按最高那张拉伸，第二行三张又按自己这行最高的一张拉伸——两行高度可能完全不同。浏览器不知道“整页所有卡片该以谁为基准”。解决办法只有两个：
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 改用
display: grid：配合grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))+align-items: stretch，天然支持跨行等高 - 保持 Flex，但结构上分组：每 3 张包一层
.card-row，每层单独设display: flex，避免整页容器直接flex-wrap
别指望 JS 补丁或 height: 100% ——前者重性能，后者依赖父容器有明确高度，而流式布局里父容器高度恰恰由子项撑开，形成循环依赖。
IE11 兼容要主动降级，别信“默认就支持”
align-items: stretch 在 IE11 里表现极不稳定，尤其嵌套 flex 或含 flex: 1 时容易塌高。务实做法只有：
- 加前缀：
display: -ms-flexbox; -ms-flex-align: stretch; - JS 补丁（仅当必须支持）：遍历所有卡片，取
offsetHeight最大值，统一赋给每张卡片的style.height
Grid 的 grid-auto-rows: 1fr 在 IE 中完全不识别，所以别想着用 Grid 降级兼容。真要全端覆盖，display: table-cell 是最后防线，但它无法响应式换行——你得在断点处手动切 layout。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
