Flexible Box Model(灵活盒子模型)
在平常的web横排布局中，会经常用到float或display:inline-block，但是在多种不同宽度的移动设备的自适应布局中用的话，还得设置百分比宽度和考虑清除浮动。而Flexible Box Model可以自动计算宽度和自适应，更加方便。
box-orient 在父元素上设置 子元素排列 vertical (垂直) or horizontal（水平）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
width: 100%;
height:100%;
}
/*理解-webkit-box-flex的用法*/
.parent1{
/*首先定义父元素display:-webkit-box; 这个属性必须给父元素，所有的属性都是用来控制子元素的*/
display: -webkit-box;
-webkit-box-pack: center; /*让元素水平居中，还有其他属性，官方文档有解释*/
-webkit-box-align: center; /*让元素垂直居中，包含其他属性，官方文档有解释*/
margin: 0 auto;
width: 100%;
height: 100%;
}
.child1{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: red;
-webkit-box-flex:1;
/*box-flex里面可以添加任意数字包括小数，可以让整个子元素针对父元素的宽度按百分比例进行划分*/
}
.child2{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: #ddd;
-webkit-box-flex:2;
}
.child3{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: #ddd;
-webkit-box-flex:3;
}
.child4{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: #ddd;
-webkit-box-flex:4;
}
/*让子元素水平垂直居中*/
/*为了浏览器兼容，所以将代码补全*/
.parent2{
width:100%;
height:100%;
display: -webkit-box;
background-color: antiquewhite;
display:box;
display: -o-box;
display:-moz-box;
box-pack:center;
-webkit-box-pack:center;
-o-box-pack:center;
-moz-box-pack:center;
box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
}
/*没有文字的DIV*/
.child5{
width: 200px;
height:200px;
background-color:#eee;
}
/*有文字的DIV*/
/*如果希望里面的文字居中，就在里面再加一个div，将文字写在div里*/
.parent3{
width:100%;
height:100%;
display: -webkit-box;
display:box;
display: -o-box;
display:-moz-box;
box-pack:center;
background-color: aqua;
-webkit-box-pack:center;
-o-box-pack:center;
-moz-box-pack:center;
box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
}
.child6{
width: 200px;
height:200px;
display: -webkit-box;
display:box;
display: -o-box;
display:-moz-box;
background-color:#eee;
box-pack:center;
-webkit-box-pack:center;
-o-box-pack:center;
-moz-box-pack:center;
box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
}
</style>
</head>
<body>
<!-- 理解box-flex -->
<div class="parent1">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
<div class="child4">4</div>
</div>
<!-- 块元素垂直居中 -->
<div class="parent2">
<div class="child5">
</div>
</div>
<!-- 块元素里包含文字垂直居中 -->
<div class="parent3">
<div class="child6">
<div>1</div>
</div>
</div>
</body>
</html>