justify-content: space-between 使首尾子元素紧贴容器边界，中间空白均分；它不控制元素宽、不加margin，仅分配主轴剩余空间，且依赖flex容器、足够剩余空间及正确flex-direction。
justify-content: space-between 在 flex 容器中到底怎么起作用
justify-content: space-between 会让 flex 主轴上的**第一个子元素贴左（或贴上）**，**最后一个子元素贴右（或贴下）**，其余元素之间的空白被均分。它不控制元素自身宽度，也不添加 margin，只是分配剩余空间。
常见误用是以为它能“让每个 item 之间空隙相等”，但其实首尾 item 到容器边缘的间距，等于 item 之间的间距 —— 这在只有 2 个子元素时看起来正常，3 个及以上时就会发现首尾“挤到边”，中间却“隔很远”。
space-between 和 space-around / space-evenly 的关键区别
三者都用于主轴对齐，但分空间逻辑不同：
-
space-between：首尾紧贴容器边界，n 个子元素 → (n−1) 份等距间隙 -
space-around：每个子元素**两侧**分得等量空白 → 相邻 item 间空白 = 2×单侧空白，首尾 item 到边界 = 单侧空白 -
space-evenly：所有间隙（包括首前、尾后、item 之间）完全等距 → n 个子元素 → (n+1) 份等距间隙
如果目标是“视觉上每个间隔看起来一样”，且允许首尾留白，space-evenly 往往比 space-between 更符合直觉。
立即学习“前端免费学习笔记（深入）”；
使用 space-between 时容易忽略的 flex 基础条件
这个属性只在 flex 容器上生效，且依赖正确的 flex 流向和子元素行为：
- 父容器必须声明
display: flex或display: inline-flex - 子元素不能设
flex: 0 0 auto且内容撑满容器（否则没剩余空间可分） - 若子元素用了
flex: 1或width: 100%，space-between就失效 —— 因为没有“剩余空间”了 - 主轴方向由
flex-direction决定：row时作用于水平，column时作用于垂直，别忘了检查方向是否匹配预期
想用 space-between 但首尾也想要留白？简单补救方案
原生 space-between 不提供首尾内边距，但不用 JS 或额外 wrapper，也能靠 CSS 解决：
- 给容器加
padding-left和padding-right（row方向）或padding-top/padding-bottom（column），再配合box-sizing: border-box - 更稳妥的是用伪元素：
::before和::after设为content: ""+flex: 0 0 0，它们会参与 space-between 的布局计算，自然撑开首尾空隙 - 注意：伪元素方案在旧版 Safari（flex: 0 0 0 支持不稳定，生产环境建议加测试
真正难的不是写这一行 justify-content: space-between，而是判断它是不是当前布局问题的正确解法 —— 很多时候你缺的不是间距，而是对容器尺寸、子元素弹性行为、甚至设计意图的重新确认。
