justify-content 在旧版浏览器中需加前缀或降级：Chrome 21–28、Firefox 18–27、Safari 6.1–8、Android Browser 4.4 不支持无前缀版本；IE10–11 仅支持 -ms-flex-pack；Safari 和 iOS 需 -webkit-justify-content；Firefox 早期用 -moz-box-pack，WebKit 旧版用 -webkit-box-pack。
justify-content 在旧版浏览器中不直接可用，必须加前缀或回退到老式盒模型写法才能生效。
哪些浏览器需要前缀？
Chrome 21–28、Firefox 18–27、Safari 6.1–8、Android Browser 4.4 都不支持无前缀的 justify-content。IE10–11 支持但仅限 -ms- 前缀，且只认部分值（如不支持 space-evenly）。
-
-webkit-justify-content：用于 Safari 6.1+、iOS Safari、Android Browser -
-moz-box-pack和-webkit-box-pack：Firefox 早期（ -
-ms-flex-pack：IE10–11（注意不是-ms-justify-content）
兼容写法怎么组织？
现代写法应按“新标准 → WebKit → IE → 老式 box”顺序排列，确保浏览器按顺序取第一个有效声明。
- 必须把标准写法
justify-content: center放在最前面（CSS cascade 规则：后声明覆盖前声明，但浏览器只认自己支持的那条） -
-webkit-justify-content: center紧随其后，覆盖 Safari/Chrome 旧版 -
-ms-flex-pack: center专供 IE10–11（IE 不识别justify-content） -
-moz-box-pack: center和-webkit-box-pack: center是最后兜底，仅对 Firefox 18–27 / Safari 5.1–6.0 生效
示例：
立即学习“前端免费学习笔记（深入）”；
display: flex; justify-content: center; -webkit-justify-content: center; -ms-flex-pack: center; -moz-box-pack: center; -webkit-box-pack: center;
为什么 space-evenly 在 IE 和旧 Safari 中失效？
这个值是 CSS Flexbox Level 1 后期加入的，IE11 和 Safari 10 之前版本根本不解析它，会直接忽略整条声明，回退到默认的 flex-start。
- IE11 只支持
flex-start/flex-end/center/space-between/space-around - Safari ≤ 10 不支持
space-evenly，即使加了-webkit-前缀也无效 - 若需兼容，要么用 JS 检测支持性后降级为
space-around，要么改用margin手动计算间距
移动端 Android WebView 怎么处理？
Android 4.4 内置 WebView 使用的是 Chromium 30，只支持带 -webkit- 前缀的 justify-content，且不支持 space-evenly；Android 5.0+ 才开始逐步支持无前缀版本。
- 务必保留
-webkit-justify-content，否则 Android 4.4 页面会全部左对齐 - 避免在
justify-content中混用start/end这类逻辑值（如justify-content: start），它们在 Android 4.4 WebView 中不被识别 - 测试时重点检查 Nexus 5（Android 4.4）、Samsung S4（Android 4.3 + 自定义 WebView）等老旧机型
真正麻烦的不是写多少行兼容代码，而是当 flex-direction: column 时，justify-content 控制的是垂直方向——这时候旧浏览器的前缀行为更难预测，建议这类布局优先用 align-items + margin 组合替代。
