space-evenly 在 ie11、android 4.4 webview 等旧环境中被完全忽略，回退为 flex-start；现代浏览器需满足 display: flex 显式设置、容器有明确宽度、子项不占满整行且为块级元素；多行时各行独立计算间距；最稳妥降级方案是伪元素 + space-between。
space-evenly 在 IE 和旧 WebView 中根本不会被解析
IE 全系（包括 IE11）、Android 4.4 内置 WebView、部分银行/政务类 App 内嵌浏览器，对 justify-content: space-evenly 的处理不是“渲染异常”，而是直接忽略整条声明。开发者工具里该行被划掉，computed 样式中 justify-content 回退为 flex-start，就是典型表现。
这不是加 -ms- 或 -webkit- 前缀能解决的——CSS 规范从未为这些前缀定义过 space-evenly 值。它属于较晚加入 Flexbox Level 1 的特性，规范落地本身就滞后于主流浏览器更新节奏。
现代浏览器支持也不等于“开箱即用”
Chrome 63+、Firefox 52+、Safari 16.4+ 才稳定支持 space-evenly，但仍有关键前提被频繁踩坑：
-
display: flex必须显式设置，不能靠继承或隐式触发 - 父容器需有明确宽度（或
max-width），否则剩余空间为 0，space-evenly无空间可分 - 子元素不能设
flex-basis: 100%或width: 100%，否则占满整行，无剩余空间 - 子元素若为
<span></span>、<a></a>等 inline 元素，必须加display: block或display: flex才参与 flex 布局
多行 flex-wrap 下的“假失效”：各行独立计算
当容器设了 flex-wrap: wrap，space-evenly 并不跨行统一分配间距，而是每行各自按本行剩余空间计算首尾外边距。例如三列布局在小屏下折成两行（2 + 1），第二行单个元素的左右外边距会远大于第一行中间间隙，视觉上像错位或失效。
这不是 bug，是规范行为。想真正跨行均布，应改用 display: grid 配合 gap；若坚持用 flex，多行场景建议降级为 justify-content: center + margin-inline 控制子项间距。
最稳妥的降级方案：伪元素 + space-between
兼容性最好、零 JS、不依赖子项宽度的纯 CSS 替代法：
container {
display: flex;
justify-content: space-between;
}
container::before,
container::after {
content: '';
display: block;
flex: 0 0 auto;
}
原理很简单：space-between 分配的是 n−1 个间隙，而 space-evenly 需要 n+1 个等距间隙。两个伪元素相当于“虚拟子项”，把总项数从 n 变成 n+2，间隙数就变成 (n+2)−1 = n+1，且它们不占内容空间，视觉效果完全一致。
注意：伪元素必须设 display: block 或 flex，仅 content: '' 不够；若子项本身是 flex 容器，建议加 flex: 0 0 auto 避免被拉伸。
这个 trick 在 IE11、Android 4.4、iOS Safari 10.3 以下都能正常工作，是当前工程实践中被验证最多次的 fallback 方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
