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;}
.item1{-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}
.item2{-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}
.item3{-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+ */
}