flexbox或grid实现等高卡片需满足：外层容器设display:flex/grid、子项无height/min-height/absolute干扰、卡片自身加min-height:0；跨行等高需分组容器，内容对齐需卡片内flex-column+flex:1+margin-top:auto。
Flexbox 或 Grid 都能实现等高卡片，但必须满足几个硬性条件；只加 align-items: stretch 或 grid-auto-rows: 1fr 不管用，常见失效原因就藏在卡片自身或内部结构里。
父容器没设 display: flex 或 display: grid
卡片等高不是子项自己决定的，而是由容器级布局控制。如果只给 .card 加 display: flex，但它的直接父容器（比如 .card-grid）仍是 display: block，那所有卡片仍在文档流里各自撑高。
- ✅ 正确：外层容器设
display: flex+flex-wrap: wrap（多行时）或display: grid+grid-template-columns: repeat(3, 1fr) - ❌ 错误：仅卡片自身设
display: flex，或混用float、inline-block布局 - 注意：
align-items: stretch是默认值，一般不用显式写；但如果父容器写了align-items: flex-start，等高就立刻失效
卡片或其子元素写了 height、min-height 或用了 position: absolute
这三个是 align-items: stretch 和 grid-auto-rows: 1fr 最常见的“中断器”。哪怕只在某张卡片上写了 min-height: auto，它也会拒绝被拉伸。
- 检查开发者工具中“矮卡片”的
height、max-height是否为auto，align-self是否为auto - 卡片内部若有
position: absolute的标题或按钮，又没在卡片上加position: relative，这些元素就脱离文档流，不参与高度计算，导致视觉上留白 -
min-height: 0必须加在卡片本身（如.card），不是加在内容区（.card-body）——这是解除 Flex 子项最小高度限制的关键
换行后跨行不等高？别指望单个容器解决
flex-wrap: wrap 启用后，浏览器把每行当作独立 Flex 容器处理，align-items: stretch 只在当前行内生效。第一行最高卡片是 300px，第二行只有 1 张卡且内容少，它只会撑到 200px，不会自动拉到 300px。
- 纯 CSS 无解：Grid 的
grid-auto-rows对跨行有效，但 Flex 没这个能力 - 可靠做法：用 JS 或服务端按每 N 张卡片包一层
.card-row（例如每行 3 张），每个.card-row单独设display: flex和gap - 避免整页容器直接
flex-wrap—— 结构失控后调试成本远高于提前分组
内容区底部按钮对不齐？靠卡片内部 Flex 垂直布局
等高只是容器高度一致，不代表内容分布一致。文字少的卡片按钮“上浮”，不是高度不够，是内容没锚定。
- 每张卡片需设
display: flex+flex-direction: column+min-height: 0 -
.card-body加flex: 1，占满剩余空间（不管文字几行） -
.card-footer加margin-top: auto，自动吸到底部 - 别用
height: 100%：它依赖父元素有明确高度，在 Flex/Grid 中常因上下文缺失而失效
真正难调的不是“怎么让卡片等高”，而是“怎么让等高后的卡片看起来真的一致”——图片比例、文字截断方式、字体渲染差异，都会干扰视觉判断。这些细节比布局本身更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
