justify-content: space-between 会导致首尾元素紧贴容器边缘、中间间隙相等，两端无空白；space-around 则使每项两侧留等量空白，中间间隙为两端距离的两倍。
用 justify-content: space-between 会出什么问题？
直接写 justify-content: space-between 看似能“两端对齐+中间均分”，但实际只保证**首尾元素紧贴容器边缘，中间间隙相等**——也就是说，首尾元素到容器边的距离 = 中间元素之间的距离。这常被误认为“两端也有空白”，其实不是：两端是零距离。
常见错误现象：space-between 下第一个子元素顶到容器左边缘、最后一个顶到右边缘，视觉上“挤在两边”，不符合“所有空白（含两端）都一样”的需求。
justify-content: space-around 的间隙逻辑是什么？
它会让每个 Flex 项**两侧获得相等的空白**，所以相邻两项之间是“两个半间距”，即两倍于首尾到容器边缘的距离。结果就是：中间间隙 = 2 × 两端距离。
使用场景：当你要“视觉上宽松些，且接受两端窄、中间宽”时可用；但不满足“所有空白完全相等”这个硬性要求。
容易踩的坑：
-
space-around在旧版 Safari（ - 如果子元素设置了
margin，会和space-around叠加，导致实际空白变大且难控制
真正实现“所有空白（含两端）完全相等”的做法
核心思路：把“空白”也当成 Flex 项来布局，用伪元素或空 div 占位。最稳的方式是加两个透明占位项：
.container {
display: flex;
}
.container::before,
.container::after {
content: "";
flex: 0 0 0;
}
这样容器内共 n+2 个 Flex 项（2 个伪元素 + n 个真实子项），justify-content: space-between 就会自然把空白均分成 n+1 份，包括两端。
关键点：
- 必须用
flex: 0 0 0（不放大、不缩小、基础尺寸为 0），避免伪元素占实际空间 - 不能用
width: 0或visibility: hidden，否则 Flex 布局可能忽略它们 - 如果子元素本身有
margin，先清掉，否则会干扰等分计算
有没有更现代、更干净的替代方案？
CSS Grid 是目前最直白的解法：用 grid-template-columns 显式定义“空白列 + 内容列”交替的结构。
.container {
display: grid;
grid-template-columns: 1fr repeat(n, auto) 1fr;
justify-content: center;
}
但注意：n 必须是已知固定数量；动态子项数时无法纯 CSS 实现，得靠 JS 插入占位格或改用上述伪元素方案。
性能影响很小，但兼容性需留意：grid 在 IE 完全不可用，若需支持 IE11，只能退回 Flex + 伪元素方案。
复杂点在于：没有“一行代码自动均分所有空白（含两端）”的原生属性。你总得在语义（加伪元素）、结构（插空 div）、或约束（固定数量 + Grid）里选一个妥协点。最容易被忽略的是——子元素自身的 box-sizing 和 border 会影响最终视觉对齐，调试时建议临时加 outline: 1px solid red 看真实占位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
