微信低版本需手动添加-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 不是可选项，是必选项。漏掉这一层，底部导航栏错位、弹窗内容不居中、列表项高度塌陷这类问题就会反复出现，且只在特定机型复现，极难定位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！