space-around使项目间间距为边距两倍,视觉上中间更宽;space-evenly则所有间距均等,包括边距与项间距,实现完全对称分布。

justify-content: space-around 和 justify-content: space-evenly 都用于在 Flex 布局中分配主轴上的空白空间,但它们的 spacing 行为有细微但重要的区别。
space-around:周围留白,两端减半
使用 space-around 时,每个子元素两侧的间隙相等。由于相邻项目的间隙会“重叠”,所以整体看起来是:项目之间的间距是项目与容器边缘间距的两倍。
- 每个项目前后各占一份空白
- 相邻项目之间的空白是两份(来自两边)
- 容器首尾的空白只有一份(外侧没有邻居)
视觉上中间空隙更宽,边缘略紧凑。
space-evenly:完全均匀分布
使用 space-evenly 时,所有项目之间的间距相等,且项目与容器边缘的间距也相同。
立即学习“前端免费学习笔记(深入)”;
- 无论在中间还是边缘,每个“空白段”都一样大
- 总空白被均分为 (n+1) 段(n 是项目数)
真正意义上的“平均分布”,比 space-around 更对称。
举个例子
假设有 3 个子元素:
- space-around:边距 = 1单位,项间 = 2单位
- space-evenly:边距 = 1单位,项间 = 1单位
space-evenly 让布局更均衡,尤其在需要严格对称时更合适。
基本上就这些,不复杂但容易忽略。










