末行卡片不占满的根源在于flex-grow未生效：需确保父容器有明确宽度、子项用flex:1而非固定flex-basis、避免min-width冲突，并统一min-width与flex-basis数值。
flex-wrap: wrap 之后末行卡片不占满怎么办
直接原因：默认 flex-grow 对单个卡片无效，容器没设宽度约束，或子项用了固定 flex-basis（比如 flex: 0 0 250px），导致末行剩余空间被闲置。
关键不是“怎么让末行填满”，而是“怎么让末行的每个卡片主动分摊剩余空间”。flex-grow 必须作用在末行的 具体子项 上，且不能被其他 flex 属性压制。
- 确保父容器有明确宽度（比如
max-width: 1200px或width: 100%），否则浏览器无法计算“剩余空间” - 子项不要写死
flex-basis；改用flex: 1 1 auto或flex: 1（等价于flex: 1 1 0） - 如果卡片内容高度不一致，加
align-items: stretch到容器，避免末行因高度差异导致视觉错位
为什么 flex: 1 不总生效？常见冲突点
flex: 1 看似简单，但实际常被隐式规则覆盖。最典型的是：卡片内部用了 display: block 的图片或标题，它们默认不撑开父容器高度；或者卡片设置了 min-width，把 flex-grow 的伸缩空间锁死了。
- 检查是否写了
min-width—— 它会阻止flex-grow缩小，但也可能意外阻止它放大（尤其当值过大时） - 图片没设
max-width: 100%+，会导致卡片基线计算异常，间接影响 flex 分布 - 父容器用了
justify-content: space-between或space-around，会和flex-grow抢空间分配权，二者别混用
兼容性与移动端适配要注意什么
老版 Safari（iOS 9–12）对 flex: 1 在换行场景下支持不稳定，尤其当卡片含 margin 时容易错列。这不是 bug，是它把 flex-basis: 0 解析成“0px”而非“无基准”，导致计算溢出。
立即学习“前端免费学习笔记（深入）”；
- 稳妥写法：用
flex: 1 1 280px（给个合理初始宽度，比如卡片最小宽度）代替flex: 1 - 移动端加
box-sizing: border-box到卡片，避免 padding/margin 累加破坏 flex 计算 - 避免在卡片上直接设
width，它会覆盖flex-basis，让flex-grow失效
一个能跑通的最小可用示例
以下代码在 Chrome/Firefox/Safari 13+ 中可稳定实现末行填充，且响应式断点清晰：
.card-grid { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; } .card-grid > * { flex: 1 1 280px; /* 关键：有基准，可伸缩 */ min-width: 280px; /* 防止过小挤压 */ box-sizing: border-box; } @media (max-width: 768px) { .card-grid > * { flex-basis: 100%; /* 小屏单列 */ } }注意：这里的 min-width 和 flex-basis 数值必须一致，否则在某些分辨率下会出现“本该换行却硬挤一排”的情况。
真正难的不是写对那几行 css，而是得意识到：flex 布局里，“填满”不是靠容器命令子项“你去占满”，而是让每个子项都具备“按需索取空间”的能力，并且所有约束条件（宽度、padding、margin、图片尺寸）都得配合这个前提。稍有遗漏，整行就塌。