微信低版本需手动添加-webkit-box等旧前缀：Android 4.3及微信6.0以下仅支持display: -webkit-box；微信6.2+早期X5内核对flex:1等支持不全；iOS 8–9.3需-webkit-flex；Autoprefixer无法生成已废弃的-webkit-box语法，必须手写多层fallback。
微信内置浏览器对 display: flex 的支持不是“全有或全无”，而是按 Android 版本、X5 内核版本、XWeb 切换节奏分层断裂的。直接写 display: flex 在 Android 4.3 或微信 6.0 以下机型上大概率失效，必须叠加旧版前缀才能兜底。
哪些微信版本和内核需要手动加前缀？
关键判断依据不是微信 App 版本号，而是底层渲染引擎：
- Android 2.1–4.3 系统自带 WebView（含微信 5.4–6.1 未装 QQ 浏览器时）：只认
display: -webkit-box，-webkit-box-orient，-webkit-box-pack等老式属性 - 微信 6.2+ 开始逐步切换到腾讯 X5 内核（后升级为 XWeb），但早期 X5 对
flex属性支持不完整，比如flex: 1可能被忽略，仍需补-webkit-flex: 1 - iOS 微信始终用 WKWebView，基本支持标准
flex，但 iOS 8–9.3 需要-webkit-flex前缀
怎么写才能覆盖主流微信机型？
不能只靠 Autoprefixer 自动生成——它默认不输出 -webkit-box 这类已废弃但微信仍在用的旧语法。必须手写多层 fallback：
Wechat MP Article Stats Comments Suite - 微信公众号管理套件
下载
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
- 容器声明顺序必须是：
display: -webkit-box→display: -webkit-flex→display: -ms-flexbox→display: flex - 主轴方向要同步写：
-webkit-box-orient: vertical+flex-direction: column，否则 Android 4.3 下flex-direction被完全忽略 - 子项伸缩要双写：
-webkit-box-flex: 1和flex: 1缺一不可；仅写后者在低版本微信里子项不会占满剩余空间 - 对齐属性同理：
-webkit-box-pack: center和justify-content: center必须共存
为什么 autoprefixer 和 postcss-preset-env 都救不了你？
因为这些工具只处理 W3C 标准草案阶段的前缀（如 -webkit-flex），不回溯兼容 WebKit 2012 年前的旧 Box 模型语法（-webkit-box-*）。Can I Use 上标“iOS Safari 7.1+ 支持 flex”是真，但它没告诉你：微信在 iOS 7.1 设备上跑的不是 Safari，而是阉割过的 UIWebView，而 UIWebView 对 flex 的支持实际从 iOS 9 才开始稳定。
立即学习“前端免费学习笔记（深入）”；
所以，如果你的用户画像里还有 Android 4.4 以下或微信 6.0 以下设备，-webkit-box 不是可选项，是必选项。漏掉这一层，底部导航栏错位、弹窗内容不居中、列表项高度塌陷这类问题就会反复出现，且只在特定机型复现，极难定位。
