为什么flex布局中justify-content: space-between没有产生预期间距？

你误解了justify-content: space-between和gap的实现逻辑，二者的作用原理完全不同：

• justify-content: space-between的效果依赖flex容器的剩余空白空间：只有当flex容器的总宽度 > 内部所有flex项（此处为li标签）的宽度总和时，才会把多余的空白空间平均分配到每两个flex项之间，同时第一个flex项贴容器左边缘，最后一个flex项贴容器右边缘。
  你当前的代码中，ul的父容器.left-links、.right-links没有设置明确宽度，默认由内容撑开，因此ul的宽度刚好等于内部3个li的宽度之和，没有多余的空白空间可供分配，space-between自然不会产生可见的间距。
• gap是直接在相邻flex项之间插入固定宽度的间距，不需要依赖容器的剩余空间，无论容器宽度是多少，都会强制在flex项之间加上你设置的间距值，所以可以直接实现你要的效果。

• 如果你需要列表项之间是固定的均等间距，直接使用gap就是最优解，完全符合你的需求，不需要额外调整其他属性。
• 如果你确实需要使用justify-content: space-between，需要先给ul设置大于内部li总宽度的明确宽度（例如width: 220px），保证容器有剩余空间可分配，但这种方式得到的间距会随容器宽度变化，不是固定值，和你用gap实现的效果不一致。

内容的提问来源于stack exchange，提问作者Worker1432