space-around两侧等距但首尾间距为中间一半，space-evenly所有间隙（含首尾）均分；前者适合宽松居中，后者适用于严格等距场景如导航图标、评分星星，且需注意IE不支持space-evenly。
flex布局中space-around和space-evenly的实际表现差异
两者都用于justify-content，但分配逻辑完全不同：space-around给每个元素**两侧**分配相等间距，首尾元素到容器边缘的间距只有中间间隙的一半；space-evenly则把**所有间隙（含首尾）均分**，视觉上更均匀。
常见错误是以为space-around能让首尾对齐容器边——其实不会。比如3个子项用space-around，实际是：[0.5x][item][x][item][x][item][0.5x]；而space-evenly是：[x][item][x][item][x][item][x]。
什么时候该选space-evenly而不是space-around
当需要严格等距、首尾对称时，必须用space-evenly。典型场景包括导航栏图标、评分星星、卡片网格头部按钮组。
-
space-around适合“宽松居中”，允许首尾留白略小（如文字按钮组，强调内容区域） -
space-evenly适合“精确控制”，尤其涉及UI规范或设计稿像素对齐时 - 注意兼容性：
space-evenly在IE中完全不支持，Safari 12+才开始支持；space-around支持度好得多（IE10+）
不用space-evenly时的替代方案
如果必须兼容老浏览器，又想要类似space-evenly的效果，可手动模拟：
立即学习“前端免费学习笔记（深入）”；
- 给容器设
padding-left和padding-right为间隙值的一半，再用justify-content: space-between - 或用
margin：首项margin-left: auto，末项margin-right: auto，其余项统一margin: 0 16px（需固定子项宽度） - 更稳妥的是改用
grid：display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))配合gap，语义更清晰且兼容性更好
容易被忽略的细节：子项flex-grow和flex-shrink会影响间距计算
如果子项设置了flex-grow: 1，它会撑满剩余空间，直接覆盖justify-content的间距逻辑——此时space-around和space-evenly都失效。
- 检查子项是否意外继承了
flex: 1或显式设置了flex-grow - 确保子项是固定宽/最大宽，或用
flex: 0 0 auto重置弹性行为 - 用浏览器开发者工具的Flexbox调试模式（Chrome/Firefox均支持）直接查看间距分布，比肉眼判断更可靠
真正麻烦的不是选哪个值，而是忘记子项自身的弹性属性正在悄悄覆盖容器的对齐规则。
