Flex 多行等间距需用 gap + 固定列宽实现，因 justify-content: space-between 仅作用于每行内部，导致最后一行间距错乱；推荐方案为设置 gap 和 calc() 动态计算项宽，并启用 box-sizing: border-box。
Flex 布局本身不直接支持「多行等间距」的语义化对齐（比如 justify-content: space-between 在换行后，最后一行会左对齐且间隙错乱），必须配合宽度控制或补位策略才能真正实现视觉上每行都均匀分布。
为什么 justify-content: space-between 在多行 Flex 中失效
当容器启用 flex-wrap: wrap 后，justify-content 只作用于**每一行内部**，而不是整个容器。最后一行元素少，space-between 会把剩余空间均分到中间空隙，导致首尾贴边、中间撑开——这不是你想要的“每行都等距”。
常见错误现象：
- 最后一行只有 2 个元素，却出现巨大右空白
- 用
margin-right模拟间隔，但最后一列右侧多出多余 margin - 响应式缩放时，列数变化但间距计算没同步更新
用 gap + 固定列宽（推荐）
这是最干净、兼容性足够（Chrome 84+/Firefox 63+/Safari 14.1+）的方案：放弃 justify-content，改用 gap 控制项间距离，再用百分比或 calc() 算出单个项目宽度。
关键点：
-
gap会自动处理行内和行间间距，无需手动算 margin - 每项宽度 =
calc((100% - gap * (列数 - 1)) / 列数) - 必须设
box-sizing: border-box，避免 padding/border 溢出 - 列数变更时，只需改一个 CSS 变量或媒体查询，不用动 HTML
示例（每行 4 列，间距 16px）：
.list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
width: calc((100% - 48px) / 4); /* 16px * (4 - 1) = 48px */
box-sizing: border-box;
}
兼容旧浏览器：用 flex: 0 0 + nth-child 清除末尾 margin
IE11 或 Safari gap，此时需用 margin 模拟间隔，并主动清除每行末尾元素的 margin-right。
实操要点：
- 设
flex: 0 0 25%（4 列）或flex: 0 0 calc(33.333% - 10px)（3 列减去左右 gap） - 给所有
.item加margin-right: 10px; margin-bottom: 10px; - 用
.item:nth-child(4n)清除每行最后一个的margin-right - 最后一行若不满，可用伪元素
::after补位（数量 = 列数 - 实际子项数 % 列数）
别忽略响应式断点下的列数重算
很多人只写一套宽度，结果小屏下元素被挤变形或换行错乱。真正健壮的做法是：
- 在
@media中重新定义列数变量（如--cols: 2），并复用同一套calc()公式 - 避免用固定像素宽度（如
width: 200px），否则无法填满容器 - 如果用
flex: 1 1 minmax(300px, 1fr))，注意它不保证等列——仅当容器宽度刚好能塞下整数个时才等宽
最易被忽略的一点：当你用 JS 动态增删子项时，nth-child 补位或伪元素方案会失效，此时应优先选 gap + CSS 变量方案，它完全由 CSS 自动响应 DOM 变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
