Flexbox卡片等高默认由align-items: stretch实现，不生效主因是父容器无高度约束、子项设height/min-height/max-height、内容脱离文档流或flex-direction为column导致拉伸方向错误。
Flexbox 实现卡片等高不需要额外写 align-items: stretch——它本来就是默认行为，不生效通常是因为父容器没高度、子项锁死了高度，或内容脱离了文档流。
为什么加了 display: flex 还是不等高
根本不是 Flex 失效，而是它“没东西可拉伸”：
- 父容器
height是auto且没被上级约束（比如没设min-height: 100vh或flex: 1），子项只能按内容撑开 - 某张卡片写了
height、max-height或min-height，直接覆盖拉伸逻辑 - 子项显式写了
align-self: flex-start，单个项脱离拉伸队列 - 父容器
flex-direction: column，此时交叉轴变成水平方向，拉伸的是宽度，不是高度
flex: 1 和 flex: auto 对等高的影响差别很大
在多列卡片中，这个参数决定你到底要“强制统一高度”还是“尊重内容自然尺寸”：
-
flex: 1（即flex: 1 1 0%）强制所有子项从零基准开始均分空间，结果必然等高；适合底部按钮需对齐、留白需统一的场景 -
flex: auto（即flex: 1 1 auto）以内容自然尺寸为起点再分配，摘要短的卡片就矮 - 若某列要固定宽度（如侧边栏），单独写
flex: 0 0 240px，避免它参与等高拉伸
卡片内底部按钮固定对齐，别用 position: absolute
文字少的卡片按钮上浮，不是高度问题，是内容没“锚定”。强行设 height 反而破坏响应性：
立即学习“前端免费学习笔记（深入）”；
-
.card设display: flex; flex-direction: column; height: 100% - 标题和描述保持正常流布局（不设
height、不加position） - 按钮加
margin-top: auto，自动吸到底部 - 如果必须用绝对定位，确保父项有
position: relative，且知道此时它的高度已是拉伸后的可靠值
换行后（flex-wrap: wrap）跨行不等高怎么办
Flex 默认只对单行子项拉伸。启用 flex-wrap: wrap 后，第二行的卡片就不再和第一行对齐——浏览器把每行当独立容器处理：
- 不要指望 CSS 自动跨行对齐，Flexbox 没这个能力
- 可靠解法是结构隔离：用 JS 或服务端按每 N 个卡片包一层
.card-row（例如每行 3 张） - 每个
.card-row单独设display: flex和gap - 避免在整页容器上直接
flex-wrap，那是自找麻烦
真正难处理的其实是响应式断点切换时的等高重算——媒体查询里改 flex-direction 到 column 后，align-items 就不管高度了，得换用 align-content 或重新设计布局逻辑。
