space-around与space-evenly的核心区别在于间隙段数不同：前者将剩余空间均分到2n份（每项左右各一份），首尾间隙为单侧值、中间间隙为其两倍；后者均分到n+1份，所有间隙（含首尾）完全相等。
space-around 和 space-evenly 的核心区别不是“哪个更均匀”，而是“间隙段数不同”：前者把剩余空间均分到 n × 2 份（每个子项左右各一份），后者均分到 n + 1 份（首、尾、以及每两个子项之间各一份）。
space-around 的间隙逻辑是“每个子项自带呼吸区”
它不关心容器边缘是否对称，只保证每个子项左右留白相等。相邻子项之间的视觉间距，其实是单侧留白的两倍；而首尾到容器边缘，只有单侧留白。
- 常见错误现象：
justify-content: space-around下，设计师说“两边空隙太小”，因为首尾间隙只有中间的一半 - 适用场景：移动端图标栏、卡片列表（避免内容贴边，但不要求绝对对称）
- 注意：如果子项设置了
margin，会和 space-around 自带的留白叠加，导致实际间距翻倍——调试时先清掉margin - 数学表达：设剩余空间为
remaining，子项数为n，则单侧间隙 =remaining / (n * 2)，首尾间隙 = 单侧间隙，相邻间隙 =2 × 单侧间隙
space-evenly 的间隙逻辑是“所有空隙一视同仁”
它强制把剩余空间切成 n + 1 段，每段大小完全相同——包括最左、最右，以及所有子项之间。
- 常见错误现象：在旧版 Safari（space-evenly，会退化为
flex-start，需加justify-content: center或用gap+display: grid降级 - 适用场景：仪表盘工具栏、登录页按钮组、需要严格左右对称的 UI
- 性能影响：无额外计算开销，但若子项宽度动态变化（如文字长度浮动），
space-evenly的布局跳动比space-around更明显 - 兼容写法示例：
.container { display: flex; justify-content: space-evenly; } <p>@supports not (justify-content: space-evenly) { .container { justify-content: center; } }</p>
别用名字猜行为：space-between / around / evenly 的命名其实有误导性
space-between 的 “between” 指的是仅在子项“之间”分空间（n − 1 段），space-around 的 “around” 是指每个子项“周围”都分一份（n × 2 段），space-evenly 的 “evenly” 才真正表示“所有段等长”（n + 1 段）。
- 当子项只有 1 个时：
space-between无效（无 between），space-around和space-evenly表现一致（都是居中+两侧等距） - 当子项总宽度 ≥ 容器宽度时：三者都会失效——
flex-wrap: wrap启用后，justify-content只作用于每一行，不是整列 - 真正容易被忽略的是：它们都只作用于主轴，且完全无视子项自身的
margin、padding或border——这些值参与盒模型计算，会压缩可用于分配的“剩余空间”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
