justify-content: space-between 让首尾项贴边是因为它将首项固定起点、末项固定终点，仅在中间间隙均分剩余空间，不控制项目与容器边缘距离；需配合 padding 或 margin 实现首尾留白。
flex justify-between 为什么会让首尾项贴边？
当使用 justify-content: space-between 时，Flex 容器会把第一个子项固定在起点、最后一个子项固定在终点，剩余空间平均分配在中间各“间隙”中——这意味着首尾项自身不占额外外边距，但视觉上容易显得挤到容器边缘。
常见误用场景：导航栏只有 3 个菜单项，左右两端紧贴父容器，中间空隙很大，而设计师希望所有间距（含首项前、末项后）都一致。
- 它只控制“项目之间的间隙”，不控制“项目与容器边缘的距离”
- 若需首尾留白，必须手动给容器加
padding，或给首/末项加margin - 项数动态变化时，
space-between的“均匀感”会失真（比如 2 项 vs 5 项，间隙数不同）
gap 属性更符合“真正均匀”的直觉
gap（或 row-gap/column-gap）直接定义相邻项目间的间距，且**自动忽略首尾边界**——它不负责撑开容器边缘，所以配合 justify-content: center 或默认 flex-start 更易控整体留白。
兼容性注意：IE 不支持 gap，但现代项目（Chrome 84+、Firefox 63+、Safari 14.1+）已全覆盖；如需兼容旧版，仍得回退到 margin 手动模拟。
立即学习“前端免费学习笔记（深入）”；
