前言
flexbox 在移动端浏览器支持的已经比较好了，但是最近在开发过程中遇到了一个问题，只在 iOS8下出现，目前iOS8 已知的机型有, iphone5s， iphone6, iphone6p
解决方案
首先查了一下 caniuse 上 flexbox的情况 https://caniuse.com/#search=flexbox，发现已知的问题中有 safari 10 以下的版本会有问题。
由于我用的是 Vue 官方 webpack 模板构建的项目，自带 postcss， 在package.json 中是可以指定 browserlist 的，也就是兼容到的浏览器版本，他默认的配置是这样的：
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]那个百分比好像是指浏览器使用量，大于1% 的，最近两个版本的，并且不支持ie8
而在线查到的大于 1% 的只有 iOS Safari 10+, 而 iOS 8 里面用的是 Safari 8, 所以显然这里没有支持 iOS 8
查了一下 官方文档，发现可以这样写，即最低兼容到 iOS7
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8",
"iOS 7"
]试了下，必须重启 dev 服务。
对比了下最终生成的css， 只是添加了一行
display: -webkit-flex;也验证了其他渠道查到的 iOS 兼容低版本使用这句代码的说法。
总结
display: -webkit-flex;这句话应该就能解决大部分问题了
参考文档
本文由 savokiss 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Nov 15, 2017 at 12:25 pm
