display:flex和display:box布局浏览器兼容性分析

display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。

1.关于display:flex

对于响应式布局，使用flex很方便，但是它的兼容性也是一个值得考虑的问题。

<div class="container">
        <div class="item" style="background:#f00"></div>
        <div class="item" style="background:#000"></div>
        <div class="item" style="background:#08c"></div>
        <div class="item" style="background:#a00"></div>
        <div class="item" style="background:#0f0"></div>
    </div>

 
           .container{ 
          
           display 
           :flex; 
          
           flex-flow:row  
           nowrap 
           ; 
          
           justify- 
           content 
           :space-between; 
          
           align-items: 
           center 
           ; 
          
           margin 
           : 
           0  
           auto 
           ; 
          
           width 
           : 
           100% 
           ; 
          
           height 
           : 
           200px 
           ; 
          
           background 
           : 
           #eee 
           ; 
          
           } 
          
           .item{flex: 
           1 
           ; 
           height 
           : 
           200px 
           ;}

对于PC端，一般chrome（测试版本：49.0.2623.110 m）和火狐（测试版本：49.0.2）都能很好地支持。ie不支持，显示的是顺序排列下来的宽度100%的模块。

对于移动端：

（1）上述代码iOS的原生safari浏览器是支持的；UC浏览器支持的很好；微信浏览器不支持（测试机型：苹果4s）

（2）安卓的原生浏览器不支持，能够正常显示模块，文档流依次排列；UC浏览器不支持，显示为空白；微信浏览器不支持（测试机型：华为荣耀6 Plus，Android4.4.2）

2.关于display:box

 
           < 
           div  
           class="container"> 
          
           < 
           div  
           class="item item1" style="background:#f00"></ 
           div 
           > 
          
           < 
           div  
           class="item item2" style="background:#000"></ 
           div 
           > 
          
           < 
           div  
           class="item item3" style="background:#08c"></ 
           div 
           > 
          
           </ 
           div 
           >

 
           .container{ 
          
           display 
           :-moz-box; 
          
           display 
           :-webkit-box; 
          
           display 
           :box; 
          
           width 
           : 
           100% 
           ; 
          
           height 
           : 
           200px 
           ; 
          
           } 
          
           .item{ 
           height 
           : 
           200px 
           ;} 
          
           .item 
           1 
           {-moz-box-flex: 
           1 
           ;-webkit-box-flex: 
           1 
           ;box-flex: 
           1 
           ;} 
          
           .item 
           2 
           {-moz-box-flex: 
           2 
           ;-webkit-box-flex: 
           2 
           ;box-flex: 
           2 
           ;} 
          
           .item 
           3 
           {-moz-box-flex: 
           3 
           ;-webkit-box-flex: 
           3 
           ;box-flex: 
           3 
           ;}

PC端：chrome（测试版本：49.0.2623.110 m）和火狐（测试版本：49.0.2）都能很好地支持。ie不支持，显示的是顺序排列下来的宽度100%的模块。

移动端：

（1）上述代码iOS的原生safari浏览器是支持的；UC浏览器支持的很好（测试机型：苹果4s）

（2）安卓的原生浏览器支持；UC浏览器不支持，显示为空白（测试机型：华为荣耀6 Plus:Android4.4.2）

　UC浏览器是支持display:box;在我的手机上之所以没显示，排查了一下原因，是因为页面缺少meta,<meta name="viewport" content="width=device-width" />加上之后就可以正常显示了。具体是为什么只有我的手机上非要加meta，我也不清楚--_--

总的来说，不考虑IE浏览器的话，PC端上使用哪个都可以，一般使用display:flex；移动端的安卓的UC只支持display:box，iOS的UCdisplay:box和display:flex两个都支持。

3.兼容浏览器的写法

 
           .container{ 
          
           display 
           : -webkit-box;  
           /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ 
          
           display 
           : -moz-box;  
           /* Firefox 17- */ 
          
           display 
           : -webkit-flex;  
           /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ 
          
           display 
           : -moz-flex;  
           /* Firefox 18+ */ 
          
           display 
           : -ms-flexbox;  
           /* IE 10 */ 
          
           display 
           : flex;  
           /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ 
          
           }