关于flex布局的目前兼容性写法
flex虽然使用起来很方便，但是他的兼容性由于历史版本的原因，一直很让人头疼，低版本IE就不用说了，webkit目前也不是所有版本都能支持同一写法，测试半天之后写了个差不多的写法，至少pc端高版本ie，chrome，firefox，opera，新版搜狗高速模式以及兼容模式都正常支持。移动端的webkit，UC，firefox都正常支持，由于手上没有winphone，暂时没测试移动端的IE。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
.box{
width: 75%;
height: 50px;
background: #eee;
border:#ccc 1px solid;
margin: 20px auto;
padding: 5px;
display: -webkit-box;
display: -moz-box;
display: -o-box;
display: -ms-flexbox;
display: flex;
}
.item{
border:#ccc 1px solid;
margin: 0 5px;
height: 48px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
-o-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
提示：你可以先修改部分代码再运行。
