space-around 的“两边更大”是错觉，实际是首尾空白为一份、相邻项间为两份，导致中间间隙视觉上更宽；其垂直方向同理，但需父容器有明确高度才能生效。
space-around 的“两边更大”其实是错觉
它并不是两边更大，而是两边更小——space-around 会让每个子元素**左右各分一份空白**，首项前、末项后只有「一份」，而相邻两项之间是「两份」（左元素右空 + 右元素左空）。所以视觉上中间间隙看起来是边距的两倍，误以为“两边被撑大”，实际是中间被拉宽了。
用数学验证：3个子元素在600px容器中
假设每个子元素宽100px，总宽300px，剩余空间 = 600 − 300 = 300px。这个空间被均分为 n + 1 份（n 是子元素数量），即 4 份 → 每份 75px：
- 首项前空白 = 75px
- 首项与次项之间 = 75px（首项右）+ 75px（次项左）= 150px
- 次项与末项之间 = 同样 150px
- 末项后空白 = 75px
这就是为什么你盯着设计稿说“两边太窄”，其实不是渲染错了，是计算逻辑本就如此。
space-around 在 flex-direction: column 下同样适用
垂直方向也遵循同一套规则：顶部/底部留白是行间留白的一半。但容易被忽略的是——如果容器没设 height 或 min-height，剩余空间为 0，space-around 就完全不生效，所有项会挤在一起，让你误判为“属性失效”。
立即学习“前端免费学习笔记（深入）”；
- 必须确保父容器有明确高度（比如
min-height: 400px） - 避免子元素设置
margin，否则会和space-around的内置空白叠加 - 旧版 Safari（≤11.0）对
space-around垂直方向支持不稳定，建议加align-items: flex-start显式兜底
真要“所有空白完全相等”，别硬扛 space-around
space-around 天然做不到首尾间距 = 项间间距。如果你的设计稿明确标注“均匀分布（含边缘）”，那它要的其实是 space-evenly：
-
space-evenly把剩余空间均分为n + 1段，每段值相同 → 首尾、项间全部等距 - 兼容性已足够：Chrome 63+、Firefox 52+、Safari 11.1+、Edge 16+
- 若需兼容 Safari ≤11.0，可用伪元素占位：
::before和::after各设content: ""+flex: 0 0 auto，再配合space-between
真正容易被忽略的，是把“视觉感受”直接当成“CSS行为”去调试——先算清份数，再看浏览器有没有空间可分，比反复改 margin 有效得多。
