flex-grow: 1 在 flex-wrap: wrap 下无法实现跨行等高，仅在同一行内按比例拉伸；真正起效的是 align-items: stretch，但需父容器有交叉轴尺寸参照且卡片内部不破坏高度继承链。
flex-grow: 1 不能单独解决窄屏下卡片高度不一致问题，它甚至可能让情况更糟——尤其在 flex-wrap: wrap 场景中。
为什么 flex-grow: 1 在换行卡片里基本没用
当父容器设了 flex-wrap: wrap（响应式布局常见做法），卡片变成多行排列时，flex-grow 只在**同一行内**起作用：它会让这一行里的卡片按剩余空间比例拉伸，但不同行之间完全独立。最高那行的卡片高度不会“传染”给下面那行。
常见错误现象：flex-grow: 1 加上去后，第一行三张卡片等高了，第二行两张却各自按内容撑开，视觉上断层明显。
- 它只影响主轴（通常是水平方向）的空间分配，不是交叉轴（垂直方向）的对齐控制
- 卡片本身没设
height或min-height时，flex-grow: 1没有拉伸基准 - 在 Safari 或旧版 Chrome 中，
flex-grow对flex-direction: column卡片内部的生效逻辑不稳定
真正起效的是 align-items: stretch + 容器高度上下文
align-items: stretch 才是让同排卡片等高的核心机制，但它依赖两个前提：
- 父容器必须有明确的交叉轴尺寸参照——比如设了
min-height，或卡片行本身被其他样式（如grid行高、line-height）锚定 - 卡片内部不能用
height: 100%破坏继承链（尤其当父级没显式高度时，百分比会失效）
示例中常见失效写法：.card { height: 100%; } → 父容器是 flex-wrap: wrap 且无 height，此时 100% 计算结果为 auto，stretch 失去作用。
窄屏下更稳妥的组合方案
放弃依赖 flex-grow 拉高，转而用结构约束+弹性填充：
- 给卡片加
min-height: 200px（或基于视口单位如min-height: 30vh），提供stretch的最低参照 - 卡片内部用
display: flex; flex-direction: column;，再给文字区设flex: 1（注意：IE11 必须写全flex: 1 1 auto） - 图片统一用
aspect-ratio: 4/3; object-fit: cover; width: 100%; height: 100%;，避免原始尺寸干扰 - 标题和描述强制截断：
-webkit-line-clamp: 2/3，配合overflow: hidden
如果必须支持跨行等高（比如两行卡片都要视觉齐平），flex-wrap 本身做不到，得切到 display: grid 并配 grid-template-rows: 1fr 1fr，或者接受窄屏单列布局。
容易被忽略的兼容性陷阱
在 iOS Safari 15.6 和部分 Android WebView 中，align-items: stretch 对 flex-direction: column 的卡片会失效，除非显式加一句：
.card {
height: 0;
min-height: 100%;
}
这不是冗余代码，而是 Safari 对 flex item 高度计算的特殊兜底逻辑——没这句，stretch 在某些嵌套层级下直接不触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
