微信小程序中display: flex在iOS旧版本失效，因系统WebKit内核不支持标准flex，需补-webkit-box/-webkit-flex等前缀，且navigator标签不支持直接设flex，须用内部view包裹。
微信小程序里 display: flex 为什么在 iOS 旧版本上失效
因为微信小程序底层 WebView 在 iOS 10 及更早版本中使用的是系统 WebKit 内核，不支持标准的 display: flex，只认 display: -webkit-box 和 -webkit-flex。这不是小程序特有问题，而是底层渲染引擎限制。
现象包括：容器未伸缩、子项堆叠、justify-content: space-between 完全无效、首次加载时布局错乱后刷新才正常。
- 仅加
display: flex的写法在 iOS 10.3.3（如 iPhone 6s）上会退化为 block 布局 -
flex: 1必须配套-webkit-box-flex: 1和-webkit-flex: 1才能生效 - 安卓低端机（如部分三星旧机型）也存在类似问题，但概率低些
手动补全 WebKit 前缀的最小可行写法
不用全量加前缀，只补关键属性即可。以下是最小兼容集合，覆盖 iOS 8–10.3 和部分安卓 WebView：
.container {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.item {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
-
-webkit-box-align和-webkit-box-pack是老式 WebKit 盒模型的对齐方式，iOS 8–9 必须靠它们 - 不要省略
display: -webkit-box—— iOS 8 不识别-webkit-flex，只认-webkit-box -
flex-direction一般无需前缀，但若用column-reverse，需加-webkit-box-orient: vertical+-webkit-box-direction: reverse
用 autoprefixer 自动处理比手写更可靠
手写易漏、难维护，尤其项目里有大量 flex-grow、align-self 等进阶用法时。推荐接入 postcss-loader + autoprefixer。
立即学习“前端免费学习笔记（深入）”；
- 配置目标浏览器时，明确写
ios ，不能只写 <code>last 2 versions—— 后者默认不含 iOS 10 - loader 顺序必须是：
less-loader→postcss-loader→css-loader，否则@import或变量可能被跳过 - WXSS 文件（.wxss）本身不走 webpack，所以该方案只适用于通过
style标签或构建产物注入的 CSS
示例配置片段：
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['iOS < 11', 'Android < 5']
})
]
小程序里 navigator 组件套 flex 的坑
直接在 <navigator></navigator> 标签上写 display: flex，iOS 和部分安卓机型会完全忽略，子元素错位甚至换行。这不是 Flex 本身的问题，而是小程序对原生组件的样式接管限制。
- 正确做法：把
flex放在内部<view></view>上，<navigator></navigator>只负责跳转逻辑 - 错误写法：
<navigator style="display:flex">...</navigator> - 正确写法：
<navigator><view style="display:flex">...</view></navigator> - 如果必须用 float/inline-block 回退，注意
<navigator></navigator>需加class="clearfix"防止高度塌陷
真正麻烦的不是写法本身，而是不同 iOS 小程序基础库版本对 WXSS 解析的差异——有些 2.20.0 版本仍会丢弃 -webkit- 前缀，得靠真机反复验证。
