使用flex布局制作小程序页面的时候会为开发带来巨大便利

但微信小程序依赖设备的原生浏览器解释css 造成不同设备对同一样式显示不同

以下以主流机型分析flex使用时的问题

比如华为机型 子元素使用flex:1 而不设置最大宽高的话 会造成子元素超出父元素问题

其他主流机型 小米 OPPO VIVO IOS11+没有问题

IOS11-的 safari浏览器也有相同的问题 如像下面这样布局

另外 使用flex在与scroll-view配合使用的时候也会出现问题 虽然官方后续更新了补丁 新增了enable-flex属性

但实际表现差强人意 推荐给scroll-view 固定宽高后 在scroll-view下 添加一个没有固定宽高的元素

正确做法：

另外 如果出现问题 可以尝试使用设备的原生浏览器进行测试 看问题是否复现 确定是否是小程序的问题 比如上面的scroll-view可以在H5中替换成overflow-y:scroll进行对比分析