space-evenly 在 IE11 和 Safari ≤10 中完全不支持，浏览器直接忽略该值并回退到 flex-start；Chrome 63+、Firefox 52+、Safari 12.1+ 开始支持，但 Safari 12.1–15.6 在 flex-wrap: wrap 下存在计算偏差，iOS Safari 直至 16.4 才稳定支持。
为什么space-evenly在IE11和Safari ≤10里完全不生效
不是写法错，是浏览器压根不认识这个值。IE11、Safari 10 及更早版本解析到 justify-content: space-evenly 时会直接忽略整条声明，回退到默认的 flex-start；加 -webkit- 前缀也无效——这些引擎连语法层面都不支持，前缀没意义。
Chrome 63+、Firefox 52+、Safari 12.1+ 才开始支持，但 Safari 12.1–15.6 在 flex-wrap: wrap 场景下仍有计算偏差；iOS Safari 直到 16.4 才稳定支持 gap，而 space-evenly 的兼容性比 gap 还差一截。
用开发者工具看 computed 样式：如果 justify-content 显示为 flex-start（而非你写的 space-evenly），基本可以断定是兼容性问题，不是 CSS 写错了。
用space-around + margin:first-child/:last-child模拟
这是最轻量、无需 JS、兼容 IE9+ 和所有旧 WebView 的 fallback 方案，视觉上接近 space-evenly 的“首尾等距”效果。
立即学习“前端免费学习笔记（深入）”；
-
.container必须设display: flex且子项不能占满主轴（留有剩余空间） -
.container设justify-content: space-around - 给第一个子元素加
margin-left: auto，最后一个加margin-right: auto - 需确保能精准定位首尾元素：静态结构可用
:first-child/:last-child；动态列表建议用 JS 添加.first/.lastclass
示例：
.container {
display: flex;
justify-content: space-around;
}
.container > :first-child { margin-left: auto; }
.container > :last-child { margin-right: auto; }
用伪元素伪造两端空白（兼容 IE9+）
当无法控制子元素 class 或需要纯 CSS 解决时，用 ::before 和 ::after 在容器两端插入不可见占位元素，把 space-between “骗”成 space-evenly 效果。
- 伪元素必须设
content: ""和display: block（或inline-block），否则不参与 flex 计算 - 不需要设宽度，flex 会自动均分三段间隙（伪首、内容、伪尾）
- IE11 支持该写法，但 iOS Safari ≤9.3 对
::before/::after在 flex 容器中的行为不稳定
示例：
.container {
display: flex;
justify-content: space-between;
}
.container::before,
.container::after {
content: "";
}
真正多行均布？改用 grid + gap
如果布局本质是网格化（如卡片列表、按钮组、图库），display: grid 比 flex 更自然，gap 天然支持行列等距，且无 justify-content 的单行局限。
-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))实现响应列数 -
gap: 1rem同时控制行距和列距，所有间隙严格相等 - 现代浏览器（Chrome 104+、Firefox 103+、Safari 16.4+）已稳定支持；老浏览器可用
@supports (display: grid)渐进增强 - 注意：
justify-content: space-evenly在 grid 容器中只控制整个网格块的对齐位置，不影响内部格子间距
真正麻烦的从来不是怎么写，而是怎么判断该用 flex 还是 grid——如果目标是“列等宽+间隙均布”，grid 是更直接、更少坑的选择。
