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 手动模拟。
立即学习“前端免费学习笔记（深入）”；
- 对水平列表，只需设置
gap: 16px，所有相邻项之间就是 16px - 无需担心项数变化导致计算错乱，也不用额外处理首尾
- 和
padding组合使用最自然：padding-inline: 16px解决首尾留白，gap: 16px解决中间间距
实际代码对比：两种写法的差异点
假设一个水平导航列表，要求每项间距 12px，且首尾各留 12px 内边距：
.nav-list {
display: flex;
padding-inline: 12px;
gap: 12px;
}
/ 对比写法：用 justify-between /
.nav-list-broken {
display: flex;
padding-inline: 12px;
justify-content: space-between; / 错！这会让首尾项离 padding 边界太近 /
}
/ 正确补救写法（不推荐） /
.nav-list-fixed {
display: flex;
justify-content: space-between;
padding-inline: 24px; / 把首尾留白翻倍，靠经验凑 /
}
关键区别：gap 是声明式间距，space-between 是分布式策略——后者依赖项数，前者只认“相邻”。
移动端适配时 gap 和 justify-between 的表现差异
在小屏幕下，如果列表项可能换行（flex-wrap: wrap），gap 依然生效于行内和行间；而 justify-content 只作用于单行内的主轴分布，换行后每行独立计算，容易造成各行首尾不对齐。
-
响应式布局中，优先用
gap+flex-wrap，避免space-between在多行时失效 - 若用
space-between，必须确保容器宽度能整除“（项数 − 1）× 间隙”，否则会出现微小偏移（尤其缩放或字体渲染差异时） - 真要兼容 IE？老老实实用
margin-right并为最后一项:last-child清除，但记得用calc()配合width防止溢出
真正均匀不是“看起来差不多”，而是“无论几项、是否换行、缩放多少，间距数值恒定”。gap 做到了这点；justify-between 做的是另一件事——它适合明确需要“撑满两端”的场景，比如表单左右标签对齐，而不是列表项均布。
