老版本WebKit（如iOS 8、Android 4.4）需回退至-webkit-box模型，仅加-webkit-前缀无效；必须双写display: -webkit-box/display: flex，并用-webkit-box-flex、-webkit-box-pack等对应属性替代现代Flexbox语法。
flex属性在iOS 8和Android 4.4上不生效？加-webkit-前缀只是第一步
老版本WebKit内核（比如Safari 7–8、Android Browser 4.4）对Flexbox的支持非常碎片化，只加-webkit-前缀远远不够。它们不认display: flex的现代语法，也不支持gap、flex-wrap: wrap-reverse等新特性，甚至对flex: 1的解析和现代浏览器完全不同。
实操建议：
- 必须同时写两套声明：先写
display: -webkit-box，再写display: flex，让老内核优先匹配前者 -
flex-direction要拆成-webkit-box-orient: horizontal/vertical，且horizontal对应row，vertical对应column -
justify-content映射为-webkit-box-pack: start/center/end/justify；align-items对应-webkit-box-align: start/center/end/baseline - 别用
flex: 1，改用-webkit-box-flex: 1（注意：这个值是无单位数字，不是比例）
为什么写了-webkit-box-flex却没撑满容器？
因为-webkit-box-flex不是“占剩余空间”，而是按权重分配“剩余空间的份数”。如果父容器没设display: -webkit-box，或者子元素里混用了现代flex和-webkit-box写法，它就完全失效。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 只加了
-webkit-box-flex: 1，但忘了父级必须是display: -webkit-box - 父级写了
display: -webkit-box，但又多写了一行display: flex，导致某些Android 4.4设备忽略前者的声明 - 子元素设置了
width或max-width，直接压制了-webkit-box-flex的伸缩行为
正确写法示例：
.container {
display: -webkit-box;
display: flex;
}
.item {
-webkit-box-flex: 1;
flex: 1;
}
justify-content: space-between在Android 4.2上错位？别依赖自动计算
老WebKit对space-between的实现有严重bug：当子元素数量变化或内容动态插入时，首尾项可能紧贴边缘，中间间隙消失。这不是前缀问题，而是布局引擎本身没正确重排。
使用场景：
- 做底部Tab栏、横向导航条等固定结构时，优先用
margin手动模拟间距 - 如果必须用
-webkit-box-pack，只在子元素数量确定、DOM静态时才考虑 - 避免在
space-between容器里嵌套position: absolute元素，老内核会丢掉定位参考
autoprefixer能全自动处理这些兼容吗？不能，它只覆盖标准语法
Autoprefixer默认只补全display: flex→display: -webkit-flex这类转换，但它**不会**把flex: 1降级为-webkit-box-flex: 1，也不会把justify-content转成-webkit-box-pack。因为这是两种不同模型（Flexbox vs Box），不是简单前缀问题。
性能与兼容性影响：
- 强行用Autoprefixer + postcss-flexbugs-fixes插件，仍无法覆盖Android 4.4以下的
-webkit-box路径 - 混合写两套CSS会略微增加体积，但比JS polyfill轻量得多，也更可控
- 如果项目已放弃Android 4.4以下，可直接用
display: -webkit-flex，无需回退到-webkit-box
真正麻烦的从来不是加几个前缀，而是老内核根本不把flex当“弹性盒子”来算——它只把它当一个带方向的流式容器。这点不理解，光补前缀只会越调越乱。
