最可靠方式是用gap替代margin并配合flex-wrap: wrap；因margin在换行时仍作用于每行首尾导致视觉错位，而gap自动避开容器边缘、仅作用于项间且需display: flex和flex-wrap: wrap共同生效。
用 gap 替代 margin，统一控制项间距离
空白间隙不均匀，最常见原因是混用 margin 和对齐方式。比如给每个子项加 margin-right，但忘了清除最后一项；或在 flex-wrap: wrap 下，margin-bottom 会作用于每行末尾，导致换行后上下错位。
gap 是 Flex 布局原生支持的间隙属性，它自动避开容器边缘、只作用于相邻项目之间，且换行时依然保持行列间距一致：
- 写
gap: 12px，等效于row-gap: 12px; column-gap: 12px - 需要不同行列间距？直接写
gap: 12px 8px（行距 12px，列距 8px） - 必须确保父容器是
display: flex或inline-flex，否则 gap 完全无效
换行后行与行之间空太多？调 align-content
启用 flex-wrap: wrap 后，若没设 align-content，默认值 stretch 会让每一行在交叉轴（通常是垂直方向）拉满容器高度，视觉上就是“行间大片空白”。
解决方法很简单：
- 让所有行顶部对齐：
align-content: flex-start - 想首尾贴边、中间均匀分布：
align-content: space-between - 单行布局下该属性无效，不用设
文字换行后右侧元素被“顶高”？改 flex-basis
当左侧是长文本（如标题），右侧是按钮或标签，窄屏下文本换行，右侧元素却悬浮在半空——这不是间隙，是 align-items: center 把它居中对齐到整个容器高度所致。
关键解法是限制换行项的主轴初始尺寸：
- 给左侧文本项设
flex: 1 1 min-content，让它以最长单词宽度为基准，避免过度撑高容器 - 右侧项保持
flex: 1 1 auto或white-space: nowrap -
min-content在 Chrome 84+、Firefox 69+、Safari 14.1+ 稳定支持
图片或内联元素底部有缝？别碰 gap，先处理渲染层
img、span 等默认按 baseline 对齐，下方会留 descender 空间，形成“看不见的底缝”。调 gap: 0 没用，因为这根本不是间隙问题。
实用方案：
- 图片加
display: block，彻底移除基线对齐 - 保留内联？改
vertical-align: top或middle - 父容器若有
line-height或大字号，也会放大该缝隙，一并重置
