justify-content: space-between 实现首尾贴边、中间间隙均分，但非视觉等距；其生效需flex主轴有剩余空间，且仅对单行有效，多行时末行不守规矩，gap才是现代布局中更可靠均分方案。
justify-content: space-between 能让首尾元素贴边、中间间隙均分，但它不是“视觉上每个元素间隔一样”的均匀分布——这是最常被误解的一点。
为什么设置了 justify-content: space-between 却没看到间隙？
不是 CSS 写错了，而是 Flex 主轴根本没“剩空间”可分：
-
display: flex没生效（比如父容器被float、position: absolute或display: inline覆盖） - 子元素总宽度 ≥ 容器宽度，导致换行 ——
flex-wrap: wrap一开，space-between就只对**单行内**生效，多行时末行往往左对齐 - 存在
display: none元素或空<div></div>，它们仍参与计算，把“间隙数”撑多了 - 子元素设了
flex-shrink: 0且内容过宽，浏览器无法压缩，剩余空间为 0
space-between 和 space-around、space-evenly 的数学区别
三者都靠“剩余空间 ÷ 间隙数”算出单个间隙大小，但间隙数不同：
-
justify-content: space-between→ 间隙数 =n − 1（n 是可见子元素个数），首尾无空隙 -
justify-content: space-around→ 间隙数 =n + 1，但首尾各占 1 份，中间相邻项之间是 2 份 -
justify-content: space-evenly→ 间隙数 =n + 1，所有间隙（含首尾）完全等大
例如 3 个子元素：space-between 分 2 处间隙；space-evenly 分 4 处；space-around 视觉上像“首尾各 0.5，中间两处各 1”。
想让多行也严格等距，别硬扛 space-between
Flex 的 space-between 对多行布局天生无力——最后一行永远不守规矩。这时候该换思路：
- 用
display: grid配合justify-content: space-between（仅当列轨道固定且容器有富余宽度时有效） - 更稳妥：用
gap+grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，它能自动均分每行，并控制行列间距 - 若必须用 Flex 多行，就放弃“全局均分”，改用
gap: 12px（现代浏览器已普遍支持，Chrome 84+、Firefox 63+、Safari 14.1+）
真正容易被忽略的干扰项：子元素的 margin
margin 不参与 space-between 的计算，但它会叠加在间隙之外：
- 比如你给每个子项加了
margin-right: 8px，又用了space-between，最终间距 =space-between算出的间隙 + 8px - 这种组合极少合理，多数情况应删掉子项的
margin，只靠gap控制间距 - 如果必须保留
margin，请统一设单侧（如全设margin-right），再用:last-child { margin-right: 0; }清除末项
gap 是目前最可控的均分方案，它不依赖容器是否“撑满”，也不受换行影响，还能分别控制 row-gap 和 column-gap。而 space-between 的逻辑始终是“先贴边，再均分中间”，一旦首尾不能贴住（比如子项宽度浮动、响应式收缩），整个布局就失准了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
