旧版Flex布局需降级为-webkit-box语法以兼容iOS Safari 6–9和Android 4.4；display、justify-content、align-items及flex等属性须全部替换为对应-webkit前缀版本，且不能混用，autoprefixer v10+已不再支持该降级。
旧版Flex布局在iOS Safari 6–9和Android Browser 4.4上直接失效
这些浏览器不识别 display: flex，只认 display: -webkit-box。光加一个 -webkit- 前缀没用——整套语法都得降级：从 justify-content 切换到 -webkit-box-pack，align-items 变成 -webkit-box-align，连子项的 flex: 1 都得写成 -webkit-box-flex: 1。
常见错误现象：display: flex 被忽略，子元素垂直堆叠、宽度塌陷、对齐完全错乱；开发者工具里能看到样式被划掉，但没意识到是语法不匹配。
- 必须整套切换：不能混用标准属性和旧Box属性（比如
display: -webkit-box+justify-content: center） - 旧Box不支持
flex-wrap，多行布局只能靠 JS 拆容器或改 DOM 结构 -
-webkit-box-orient控制主轴方向（horizontal/vertical），默认是horizontal，但不写会出兼容问题
autoprefixer 默认不生成 -webkit-box 规则
新版 autoprefixer（v10+）默认只处理标准 Flex 的前缀（如 -ms-flex），已移除对 -webkit-box 的支持。这不是 bug，是主动放弃——因为该语法已被认为过时且语义模糊。
使用场景：项目仍需支持 iOS 7–9 或 Android 4.4（比如企业内网系统、老款车载终端）。
立即学习“前端免费学习笔记（深入）”；
- 手动补全旧Box规则：在 CSS 中紧挨着标准 Flex 写一组
-webkit-box声明，顺序必须是旧语法在前、新语法在后 - 不要依赖 PostCSS 插件自动转换，目前没有稳定可靠的
-webkit-box补全插件 - 如果用 Sass/Less，可封装 mixin，但注意
-webkit-box-flex的数值逻辑和flex不同（它只接受数字，不接受1 1 auto）
justify-content 和 -webkit-box-pack 的对齐值不一一对应
justify-content: space-between 对应 -webkit-box-pack: justify，但 justify-content: space-around 在旧Box里根本没有等效值——它会被忽略，实际表现接近 space-between 或 start，取决于浏览器版本。
性能影响极小，但维护成本高：每个对齐需求都要查表映射，容易漏写或写错。
-
flex-start→-webkit-box-pack: start -
center→-webkit-box-pack: center -
flex-end→-webkit-box-pack: end -
space-between→-webkit-box-pack: justify -
space-around和stretch无可靠对应，建议改用 padding 或 margin 模拟
安卓 4.4 WebView 的 display: -webkit-box 有渲染抖动
某些机型（尤其三星旧款）在页面重绘时，-webkit-box 容器内的子元素会短暂错位或缩放，尤其配合 transform 或 position: absolute 时更明显。这不是 CSS 写错了，是 WebKit 旧内核的 layout cache bug。
最容易被忽略的一点：这类抖动不会出现在 Chrome DevTools 的模拟器里，必须真机测试。
- 临时修复：给容器加
-webkit-transform: translateZ(0)强制触发 GPU 渲染 - 避免在
-webkit-box容器内嵌套position: absolute元素，改用margin或top/left配合相对定位 - 如果内容高度动态变化，慎用
-webkit-box-flex: 1，它在 resize 时容易触发 layout thrashing
