justify-content: space-around 并非严格居中，而是使首尾项外侧间距为中间间距的一半；真正居中应选 justify-content: center 配合 gap 或手动 margin。
要让多个元素在 Flex 容器中水平居中，并且彼此之间、与容器边缘保持均匀间距，justify-content: space-around 是一个常用选择，但它其实不是“严格居中”，而是“平均分配剩余空间”，需注意细节。
space-around 的真实行为
它会让每个项目两侧的空白相等，因此首项前面、末项后面的间距只有中间间隙的一半。视觉上整体略偏左（或偏右），并非所有元素几何中心对齐容器中心。
- 比如 3 个等宽项目：左边距 = 右边距 = 中间距 ÷ 2
- 容器总宽固定时，项目不会真正“居中成组”，而是“分散排布”
真正水平居中一组元素的推荐方式
如果目标是让这组元素作为一个整体，其水平中心线与容器中心线重合，更稳妥的做法是：
- 用 justify-content: center + 多个子元素直接并列（它们会整体居中）
- 若需间隙，给子元素加 margin-left / margin-right（首尾元素单独清除）
- 或用 gap（现代浏览器支持良好）配合 justify-content: center
什么时候用 space-around 更合适
适合布局强调“呼吸感”和“均衡节奏”，而非精确对齐的场景，例如导航栏、图标栏、卡片列表：
立即学习“前端免费学习笔记（深入）”；
- 容器宽度不固定（如响应式宽度）时，space-around 自动适应更好
- 不要求首尾留白等于中间留白，只希望视觉松散均匀
- 项目数量动态变化，又不想手动处理首尾 margin
小技巧：模拟“居中+等间距”的折中方案
如果坚持用 space-around 又想视觉更平衡，可给容器加左右内边距（padding-inline-start/end），抵消首尾半间距的落差：
- .container { display: flex; justify-content: space-around; padding: 0 20px; }
- 数值根据项目数量和宽度微调，通常试 1/4～1/2 的 gap 值即可
