space-evenly 不被 IE 全系、Android 4.4 WebView 等旧环境识别，Chrome 63+、Firefox 52+、Safari 16.4+ 才稳定支持，且需满足有剩余空间、正确 display 和 flex-direction 等前提；多行时各行独立计算，伪元素 + space-between 是最佳降级方案。
它不是“不兼容”，是根本没被识别——浏览器压根不认识这个值。
IE 全系和旧 WebView 直接忽略 space-evenly
IE11 及更早版本、Android 4.4 内置 WebView、部分企业级混合容器（如某些银行 App 内嵌浏览器），连 justify-content: space-evenly 的语法都不解析。开发者工具里看到该声明被划掉，computed 样式里 justify-content 显示为 flex-start，就是典型表现。
这不是加 -ms- 或 -webkit- 前缀能解决的——CSS 规范里这些前缀版本压根没定义 space-evenly。
- Chrome 63+、Firefox 52+ 才开始支持
- Safari 12.1+ 支持，但 12.1–15.6 在
flex-wrap: wrap下首尾间距错位 - iOS Safari 直到 16.4 才稳定支持
gap，而space-evenly的兼容性比gap还差一截
space-evenly 生效的前提条件常被忽略
即使浏览器支持，space-evenly 也只在有“剩余空间”时才起作用。常见失效场景：
- 父容器没设
display: flex，或写了flex-direction: column（此时justify-content控制的是垂直方向） - 子元素写了
width: 100%、flex-basis: 100%或flex: 0 0 auto，把整行占满，没剩空间可分 - 子元素是
、这类 inline 元素，没显式设display: block或display: flex，不参与 flex 布局
多行 flex 下 space-evenly 实际是“每行独立计算”
当容器设了 flex-wrap: wrap，且子项换行后，space-evenly 不会跨行统一分配间距。第一行首尾外边距、第二行首尾外边距各自按本行剩余空间算，结果经常不对齐，视觉上像“失效”。
比如三列卡片布局，小屏下变成两行（2 + 1），第二行只有一个项，它的左右外边距会远大于第一行中间两项的间隙——这不是 bug，是规范行为。
- 想真正跨行均布，别硬扛
flex，改用display: grid+gap - 若必须用 flex，多行场景建议降级为
justify-content: center，再用margin-inline统一控制子项横向间距
最稳妥的 fallback 方案：伪元素 + space-between
这是目前兼容性最好、无需 JS、无宽度依赖的纯 CSS 替代方案：
.container {
display: flex;
justify-content: space-between;
}
.container::before,
.container::after {
content: "";
flex: 0 0 auto;
}
原理很简单：space-between 把 n 个子项之间的 n−1 个间隙均分；加上两个不占内容的伪元素，就变成 n+1 个间隙，效果等同于 space-evenly 的 n+1 段等距。
- 所有现代浏览器都支持
::before/::after和flex - 不需要知道子项数量，也不用动态加
.first/.last类 - 注意：伪元素要设
flex: 0 0 auto（或至少width: 0），否则可能撑开容器
真正容易被忽略的点不在写法，而在验证：上线前一定要在目标环境（尤其是安卓低版本 WebView、微信内置浏览器、钉钉内嵌页）里真机检查 computed 样式，别只信 Can I Use 的“支持”标记——很多“支持”是实验室级的，实际渲染仍出偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
