gap 是解决多行 Flex 卡片间距不一致最直接有效的手段，需满足父容器为 display: flex、显式声明 flex-wrap: wrap、卡片为直接子元素三个条件，且应避免 align-content 干扰。
gap 是解决多行 Flex 卡片间距不一致最直接有效的手段，前提是父容器为 display: flex 且启用了 flex-wrap: wrap；用 margin 手动控制几乎必然导致末行右侧或末列底部多出空白。
为什么 margin 在换行后会失效
Flex 换行后，每行独立计算主轴剩余空间，margin-right 和 margin-bottom 仍作用于 DOM 顺序上的每个子项，而非视觉上的“行尾”：
- 最后一行的最后一个卡片仍有
margin-right，造成右侧多余空白 -
:nth-child(3n)类选择器在响应式断点切换列数时立即错位，无法识别真实换行位置 - 若卡片带
flex-grow或内容高度不一，margin的叠加逻辑会让间隙视觉上忽大忽小
gap 必须满足的三个生效条件
写了 gap: 16px 却没效果？先验证这三点：
- 父容器
display值必须是flex（不是inline-flex，也不是被后代样式覆盖成block） - 必须显式声明
flex-wrap: wrap（仅当子项实际换行时，row-gap才起作用） - 卡片必须是该容器的**直接子元素**（中间不能嵌套
<div class="wrapper">等冗余层）
避免 align-content 干扰 row-gap
align-content 不是用来设像素级行间距的，它只分配交叉轴上的“剩余空间”，和 row-gap 行为冲突：
立即学习“前端免费学习笔记（深入）”；
- 容器设了固定
height时，align-content: space-between会把row-gap插入的空白也纳入再分配，导致行位置飘忽 -
align-content: stretch（默认）会让每行被拉高填满容器，直接掩盖row-gap效果 - 真要控制行间像素距离，请关掉
align-content（设为flex-start），只用row-gap: 12px
兼容老浏览器的降级要点
IE 完全不支持 gap，Safari ≤14.1、部分 Android WebView 也存在兼容问题，降级不能只靠 @supports：
- 稳妥写法是先写
gap: 12px，再用@supports not (gap: 0) { ... }包裹降级规则 - 回退方案优先用相邻兄弟选择器：
.card + .card { margin-left: 12px; }，比:last-child可靠 - 若必须清除底部间隙，用
.card:last-child { margin-bottom: 0; }仅适用于单列或列数固定的场景；动态换行时建议直接切到display: grid
真正容易被忽略的是：当卡片高度不一致时，row-gap 依然稳定生效，但如果你同时调了 align-content，它的“行块”概念会因每行基线浮动而显得上下错位——这时别硬调，先统一子项最小高度，或直接换 grid。
