justify-content: space-evenly 是专为“两端留空 + 中间等距”设计的属性，将主轴剩余空间平均分为 n+1 份，确保子项与子项、子项与容器边缘间距完全相等；但需父容器设 display: flex、子项不占满主轴、注意 flex-direction 方向及多行独立计算，且 IE11 不支持。
justify-content: space-evenly 是最直接解法
想让 n 个子项在 Flex 容器内“两端留空 + 中间等距”，justify-content: space-evenly 就是专为此设计的。它把主轴剩余空间平均分成 n + 1 份，每份就是首尾到容器边缘、以及相邻子项之间的空白——无需伪元素、不依赖子项尺寸、不手动算 margin。
常见错误是误用 space-between 后发现首尾贴边，或硬套 space-around 导致中间间隙变宽（它是 n + 1 份但分配逻辑不同：首尾各占 0.5 份，中间占 2 份）。
注意兼容性：space-evenly 在 IE11 及更早版本中不支持；如需兼容，得降级处理（见后文）。
子项宽度必须可收缩，否则 space-evenly 失效
space-evenly 只分配“剩余空间”——如果子项总宽度 ≥ 容器宽度，就没有剩余空间可分，所有子项会挤在一起或换行，属性表现为空白消失。
确保子项能随容器缩放，关键靠这三个设置：
- 子项不要写死
width（如width: 200px），改用flex: 1或max-width+flex-shrink: 1 - 避免
flex-shrink: 0（除非你明确要禁止压缩） - 文字内容过长时，加
white-space: nowrap; overflow: hidden;防止撑宽
移动端小屏下尤其容易触发溢出：一个设了 width: 180px 的按钮，在 360px 宽容器里放两个就刚好满，第三个必然换行，space-evenly 只作用于单行，末行只剩一项时会左对齐。
响应式场景下，gap 比 justify-content 更稳
当子项数量动态变化（比如从 3 个变成 5 个）、或高度差异大（如图文混排卡片），justify-content 在 flex-direction: column 下可能把最后一项推出视口底部；而 gap 是独立控制项间空白的属性，不受换行、数量、方向影响。
只要容器是 display: flex 或 display: grid，gap 都生效：
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
注意：gap 不控制首尾到容器边缘的距离，但它和 padding 组合就能模拟“两端等距”效果（例如 padding: 0 16px + gap: 16px），且不会被子项的 margin 叠加干扰——这点比 justify-content 更干净。
IE11 兼容方案：伪元素 + space-between
如果必须支持 IE11，space-evenly 不可用，只能用伪元素占位 + space-between 模拟：
.container {
display: flex;
}
.container::before,
.container::after {
content: "";
flex: 0 0 0;
}
原理：插入两个零尺寸占位项后，容器内共 n + 2 个 Flex 项，justify-content: space-between 就会自然分出 n + 1 份等距空白。
必须用 flex: 0 0 0（不放大、不缩小、基础尺寸为 0），不能用 width: 0 或 visibility: hidden，否则 IE11 可能忽略伪元素参与布局计算。
这个方案唯一脆弱点是：一旦子项本身带 margin，就会和等分空白叠加，导致实际间距失控——所以务必清掉所有子项的 margin，统一交给 gap 或伪元素逻辑控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
