先记住这个答案
三张定宽卡片放进一行，先算卡片和 gap 占了多少宽度，剩下的才由 justify-content 分配。space-between 把可分配余量放到两道卡片间，首尾靠两端；space-around 给每张卡片两侧各一份，边缘看起来只有内部间隔的一半。项目本身变宽后余量会减少，间距也会跟着收缩。
space-between两端贴边space-around边缘空隙是内部一半- 项目增长会先消耗余量
- 换行后每条线单独对齐
三张卡片的两种间距算法
三张宽 100px 的卡片放进 500px 容器，忽略其他间距后有 200px 余量。space-between 只有两个内部空隙，各为 100px；space-around 相当于给三张卡片各分 200/3px 的空间，再一半放在左、一半放在右，内部空隙约 66.7px，两侧边缘约 33.3px。记住这个比例，比背“均匀排列”更可靠。
.between {
display: flex;
justify-content: space-between; /* 只在相邻项之间分余量 */
}
.around {
display: flex;
justify-content: space-around; /* 每项两侧各分半份 */
}两组声明改变的是正余量的分配位置，不会修改项目本身的尺寸。
余量在项目间或项目周围分配
justify-content 处理的是项目经过伸缩后剩下的主轴空间。如果子项都写了 flex-grow: 1，余量先被项目尺寸吃完，这两个取值看起来可能完全一样。使用 flex-wrap: wrap 时，每条线各自分配自己的剩余空间；只有一个项目的末行在 space-between 下会落在主轴起始侧，而 space-around 会给它两侧留白。
gap 与空间分配也不要混在一起。gap: 12px 先提供固定的项目间距，space-between 再把剩余正空间加到每一处间隔；因此实际间距至少是固定沟槽，容器变宽还会增长。space-around 也会在这个固定沟槽之外分配边缘和内部空间。要让卡片间距始终保持 12px，通常只写 gap，再用其他方式处理整组卡片的位置。只有希望随着容器变宽把它们推散，才用这些分配值。
容易答错的地方
- 以为
space-around的所有空隙都相等 - 项目之间由两个半份空间组成，边缘只有一个半份，所以中间空隙通常是边缘的两倍。
- 把
gap当成同一件事 gap是指定的最小固定间隔，justify-content分配余量；两者可以同时存在，最终相邻距离会叠加。
面试官还会怎么问？
只有一个项目时两者如何表现？
space-between 没有内部空隙可分配，项目在主轴起始侧；space-around 把余量放到项目两侧，使其居中。
主轴方向反过来，首尾会怎样？
“首”和“尾”指主轴起止端，不固定为左右。row-reverse 会改变它们的物理方向。
为什么写了 space-between 却没有间距？
先检查项目是否增长吃掉余量、容器是否真的有确定的可用主轴空间，以及是否被项目或外边距占满。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。