Flexbox实现等高多列卡片的核心是父容器启用弹性上下文并确保align-items: stretch生效：需设display: flex、flex-direction: row，父容器有明确高度或被内容撑开，子项无height/min-height/align-self干扰，且内容参与高度计算。
Flexbox 实现等高多列卡片，核心不是“让每张卡片自己变高”，而是让父容器开启弹性上下文，并确保子项在交叉轴（垂直方向）上能自然拉伸——align-items: stretch 默认就干这事，但极其容易被一行样式悄悄关掉。
为什么写了 display: flex 却不等高
常见失效不是语法错，而是拉伸行为被破坏：
- 父容器
height或min-height是auto，且没被内容撑开（比如子项里全是position: absolute或浮动）→ computed height 为0px，stretch 没空间可拉 - 某张卡片写了
height、max-height或旧版 Safari 下的min-height: 0→ 直接中断拉伸 - 某张卡片写了
align-self: flex-start或flex: none→ 主动退出拉伸队列 - 父容器漏写
display: flex，只写了flex-direction或justify-content→ Flex 上下文根本没建立
flex-direction: row 和 flex-direction: column 对等高的影响
等高永远发生在交叉轴上，方向一变，效果完全不同：
-
flex-direction: row（默认）→ 交叉轴是垂直方向 → 子项等高（你要的效果） -
flex-direction: column→ 交叉轴变成水平方向 → 此时是“等宽”，不是等高；想让多列卡片纵向堆叠还等高，必须用display: grid或 JS 测高 - 别指望
flex-direction: column+align-items: stretch让多行卡片等高——它只控制每行内子项的宽度对齐
卡片内部内容不一致时，如何让按钮统一到底部
即使外部等高了，内容少的卡片按钮会飘在上面，这是因为空间没被内部元素主动占满：
立即学习“前端免费学习笔记（深入）”；
- 给卡片本身设
display: flex; flex-direction: column; - 把描述文字区域（如
<p>）设为flex: 1，它会吃掉剩余空间，把按钮“顶”到底部 - 或者给按钮加
margin-top: auto，也能实现吸附效果 - 避免在卡片内部用
height: 100%—— 父容器高度是auto时，百分比无法计算，直接失效
flex-wrap: wrap 后还能跨行等高吗
不能。Flexbox 是一维模型，flex-wrap: wrap 只会让等高在“同一行内”生效：
- 第一行三列，最高项 320px → 该行所有子项都拉到 320px
- 第二行三列，最高项 180px → 该行所有子项都拉到 180px
- 两行之间高度完全独立——这不是 bug，是 Flex 本质决定的
- 要实现真正二维等高（比如 3×3 卡片全部严格一致），必须用
display: grid配grid-auto-rows: minmax(0, 1fr)
真正难调试的点往往不在子项样式，而在父容器的 computed height 是多少、是不是 auto；盯着子项调 height，不如先打开开发者工具看父容器实际高度值。
