flexbox 适配低端设备

[Dream4ever]

需求描述

flexbox 做定位非常方便，但是老旧手机需要额外设置，因此做了简单的研究。

方案调研

调研过程

Google：flexbox ios support。

第一个搜索结果是 caniuse 的：CSS Flexible Box Layout Module，从列表中数据可知，iOS 7.1+ 和 Android 4.4+ 都是完全支持的，那就好说了。

第二个搜索结果是 CSS-Tricks 的：Using Flexbox: Mixing Old and New for the Best Browser Support，从文中内容可知，要在老旧手机上正常使用 flexbox，还需要针对不同的设备做不同的设置。

根据搜索结果中的 Flexbox not working on iPad and Safari 可知，可以用 Autoprefixer 为 flexbox 添加对应的浏览器兼容性设置。

当然了，如果用 webpack 来编译项目的话，直接配置好 autoprefixer 就可以了，最终生成的代码会自动添加兼容老旧浏览器的 CSS 代码。

入选方案

• Using Flexbox: Mixing Old and New for the Best Browser Support

具体代码

Autoprefixer 中定义的 Browserlist 参数如下，可保证兼容所需的设备：

>= 0.1%, ie >= 8, ios >= 8, android >= 4.4

应用过程

在使用过程中，发现 iOS7 不支持 justify-content: space-around 这个属性（值？）。

参考资料

• Google: flexbox justify-content space-around compatibility
• Flexbox旧版本写法有space-around?