正确做法是用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。常用策略是用选择器排除首尾：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
}
<p>.container > * {
margin-right: 12px;
margin-bottom: 12px;
}</p><p>/<em> 清除每行最后一项的 right margin </em>/
.container > *:nth-child(4n) {
margin-right: 0;
}</p><p>/<em> 清除最后一行所有项的 bottom margin（需知道单行最大数量）</em>/
.container > *:nth-last-child(-n+4) {
margin-bottom: 0;
}-
4n假设单行最多放 4 个，需按实际flex-basis或width动态计算 -
:nth-last-child(-n+4)匹配倒数 1~4 个元素，即最后一行全部 - 响应式断点变化时，这个
n值也要同步改，否则错位重现
flex-basis 和 min-width 配合 wrap 更可靠
只靠 margin 或 gap 不能解决换行逻辑混乱的问题。真正决定何时换行的是子项的“占据宽度”，而它由 flex-basis、min-width 和容器剩余空间共同决定。
- 给子项设
flex: 0 0 calc(25% - 12px)（配合gap: 12px）比单纯width: 25%更稳 - 避免使用
flex: 1或flex: auto，它们会让子项拉伸，破坏等分布局 - 容器加
box-sizing: border-box，确保padding不影响换行计算
gap 是现代方案的分水岭，不用它就得手动算 nth-child；而哪怕用了 gap，如果子项 flex-basis 没控好，照样换行错乱。换行不是 flex-wrap 自己能决定的，它只是“允许换”，真正拍板的是尺寸计算和边界处理。
