正确做法是用gap替代margin，因其天然规避末尾溢出；若必须用margin，则需nth-child手动清除行尾和末行的冗余外边距，并配合flex-basis精确控制换行。
直接用 flex-wrap: wrap 是对的，但加 margin 后容易出现首行/末行对不齐、间隙错位、换行后元素被挤出容器等问题——根本原因不是 flex-wrap 不工作，而是 margin 在换行边界上产生了不可见的“溢出”或“累积偏移”。
为什么 margin 在多行 flex 中会错位
当子元素设置了 margin-right 和 margin-bottom，最后一项在每行末尾仍保留 margin-right，导致整行宽度超限；同理，最后一行的每个元素还带着 margin-bottom，但下方已无内容，视觉上就显得底部空太多。浏览器不会自动“忽略末尾项的外边距”。
- 换行点不等于布局重置点，
margin始终生效 - 父容器
width固定 + 子项margin累加 → 容易触发换行早于预期 -
gap可替代margin且天然规避末尾溢出问题（但 IE 不支持）
用 gap 替代 margin（推荐方案）
gap 是 flex 布局原生间距控制属性，作用于行内和行间，不作用于容器边缘，完全避开 margin 的边界副作用。只要不需兼容 IE，这是最干净的解法。
container {
display: flex;
flex-wrap: wrap;
gap: 12px; /* 行内间距 = 列间距，行间间距 = 行间距 */
}
-
gap: 12px 8px表示row-gap 12px+column-gap 8px - 所有子元素无需写任何
margin，布局自动对齐 - 响应式中修改
gap值即可统一调整疏密，维护成本低
必须用 margin 时的兜底写法
若项目强依赖 IE 或需精确控制某几项的间距（比如首项无左距、末项无右距），就得手动清除边界 margin。常用策略是用选择器排除首尾：
