space-evenly 在 ie、android 4.4 webview、safari ≤15.6 中被静默丢弃，因浏览器完全不识别该值；伪元素 + space-between 是最稳的纯 css 替代方案，通过 :before/:after 插入空元素并设 content: "" 和 display: block 实现均布。
justify-content: space-evenly 在 IE、Android 4.4 WebView、Safari ≤15.6 等环境里根本不会被解析——不是“表现不准”，是浏览器压根不认识这个值，整条声明被静默丢弃。
为什么 space-evenly 会被忽略而不是降级？
它不属于任何已废弃的旧草案语法，-webkit-justify-content: space-evenly 和 -ms-flex-pack: evenly 均未被规范定义。加前缀没用，@supports (justify-content: space-evenly) 在 Safari 14.1 下还会误报支持，检测不可靠。
- IE 全系（包括 IE11）直接跳过该声明，computed 样式中 fallback 为
flex-start - Android 4.4 WebView（Chromium 30）只认
flex-start/center/flex-end/space-between - Safari 12.1–15.6 在
flex-wrap: wrap下首尾间距错位，16.4 才真正稳定
伪元素 + space-between 是最稳的纯 CSS 替代方案
原理简单：在容器前后插入两个空的 :before 和 :after，让子项总数变为 n + 2，再用 space-between 分配，此时首尾外边距就等于中间间隙。
- 必须设
content: ""+display: block（或inline-block），否则不参与布局 - 容器需保持
display: flex，不能写成display: -webkit-box，否则伪元素不生效 - 若子项本身有
margin，要统一清零，避免叠加
.container {
display: flex;
justify-content: space-between;
}
.container:before,
.container:after {
content: "";
display: block;
}
多行 Flex 场景下别硬扛 space-evenly
即使浏览器支持，flex-wrap: wrap 下的 space-evenly 是按每行独立计算剩余空间的。比如三列变两行（2+1），第二行单个元素左右外边距会远大于第一行中间间隙——这不是 bug，是规范行为。
- 想真正跨行均布，改用
display: grid+gap（Safari 16.4+、Chrome 66+ 支持良好） - 若必须用 Flex，降级为
justify-content: center，再用margin-inline: 8px统一控制子项横向间距 - 注意：旧 Android 4.4 不支持
margin-inline，得回退到margin-left/margin-right
容易被忽略的生效前提
就算浏览器支持 space-evenly，它也只在“有剩余空间”时才起作用。常见失效不是兼容性问题，而是布局条件没满足：
- 父容器漏了
display: flex或写了flex-direction: column（此时justify-content控制垂直方向） - 子项写了
width: 100%、flex-basis: 100%或flex: 0 0 auto，把整行占满，没剩空间可分 - 子项是
<span></span>、<a></a>这类 inline 元素，没显式设display: block或display: flex，不参与 Flex 布局
真正在意兼容性时，别依赖“某个值是否被支持”，而要验证“整个布局是否在目标设备上视觉对齐”。伪元素方案看似多两行 CSS，但它不依赖运行时 JS、不增加 DOM 节点、不触发重排，是目前最轻量且可靠的 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
