【前端】css flex的浏览器兼容问题

最近开发时发现前端有个页面在iphone6上布局坏掉了。一看发现是flex布局不兼容产生的。

上网搜索了有关资料，发现css 的 flex 经历了版本的更新，我们现在技术人员写flex布局，都是display: flex;这样写的，确实没错，这是现在的标准版本。但还有个旧版本：display: box; 以及还有个过渡版本：display: flex box; 从而产生了兼容问题。

Android

2.3 开始就支持旧版本display:-webkit-box;
4.4 开始支持标准版本display: flex;

IOS

6.1 开始支持旧版本display:-webkit-box;
7.1 开始支持标准版本display: flex;

PC

ie10开始支持，但是IE10的是-ms形式的。

看到这，基本上知道了display: flex;在ios7.1版本之前都会坏掉。

解决办法：

按照向下兼容，把旧版本的写法放在下面，那么：

.box {
    display:-webkit-flex;
    display:flex;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
}

.flex1 {            
    -webkit-flex: 1;        
    -ms-flex: 1             
    flex: 1;                
    -webkit-box-flex: 1     
    -moz-box-flex: 1;       
}

注意：这里要记得，布局内的各个flex1，要给出一个width。比如，你有两个flex1，想各占box的一半，那就width: 50%; 若有三个，想一个占50%,两个占25%,也是可以的。