弹性盒子是 CSS3 的一种新的布局模式。
当页面需要适应不同的屏幕大小以及设备类型时，使用弹性盒子布局模式可以确保元素拥有恰当的行为。
使用场景1
将一个div划分成多份，每一份占有某比例的宽度，无论在任何大小的设备屏幕上，此比例都保持不变。
代码：
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.father_box{
display: -moz-box;
display: -webkit-box;
display: box;
height:300px;
}
.child_box_one{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:red;
}
.child_box_two{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:blue;
}
.child_box_three{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:yellow;
}
</style>
</head>
<body>
<div class="father_box">
<div class="child_box_one">1</div>
<div class="child_box_two">2</div>
<div class="child_box_three">3</div>
</div>
</body>
</html>
首先父元素必须添加必要的声明：display:box或者display:inline-box；
三个并列的子元素每一个都声明了box-flex: 1;，这说明每一个子div都将占据父div的三分之一容量。
结果：
image.png
使用场景2
将一个div划分成多份，其中有一份的宽度是固定的，除定宽的这份之外其他的每一份占有余下容量的某比例的宽度，无论在任何大小的设备屏幕上，此比例都保持不变。
代码：
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.father_box{
display: -moz-box;
display: -webkit-box;
display: box;
height:300px;
}
.child_box_one{
/*-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;*/
width:30px;
background-color:red;
}
.child_box_two{
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
background-color:blue;
}
.child_box_three{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:yellow;
}
</style>
</head>
<body>
<div class="father_box">
<div class="child_box_one">1</div>
<div class="child_box_two">2</div>
<div class="child_box_three">3</div>
</div>
</body>
</html>
结果：
image.png
如图所示，第一个子div——child_box_one固定占有30px的宽度，剩下两个子div按2:1的比例分配父div宽度减掉30px后剩下的容量。
margin和padding的影响
如果某一个子div增加了magin/padding的属性，应该是先用可分配宽度减去margin/padding的宽度，剩下的宽度再按相应的比例分配给不同的子div。
代码：
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.father_box{
display: -moz-box;
display: -webkit-box;
display: box;
height:300px;
}
.child_box_one{
/*-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;*/
width:30px;
background-color:red;
}
.child_box_two{
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
background-color:blue;
margin:0 30px;
}
.child_box_three{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:yellow;
}
</style>
</head>
<body>
<div class="father_box">
<div class="child_box_one">1</div>
<div class="child_box_two">2</div>
<div class="child_box_three">3</div>
</div>
</body>
</html>
结果：
image.png
可以看到，定宽的红色div宽度不变，虽然我们只给蓝色div加了margin，但事实上蓝色div和黄色div的分配到的宽度都减少了。
父标签的可选属性:box-orient
box-orient用来确定子元素的方向，是横着排还是竖着走。可选的值有：
horizontal | vertical | inline-axis | block-axis | inherit
例如：
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.father_box{
display: -moz-box;
display: -webkit-box;
display: box;
height:400px;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
-o-box-orient:vertical;
box-orient:vertical;
}
.child_box_one{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:red;
width: 100px;
}
.child_box_two{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:blue;
width: 100px;
}
.child_box_three{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:yellow;
width: 100px;
}
</style>
</head>
<body>
<div class="father_box">
<div class="child_box_one">1</div>
<div class="child_box_two">2</div>
<div class="child_box_three">3</div>
</div>
</body>
</html>
结果：
image.png
父div中设置
box-orient:vertical;子div就变成纵向排列了。
父标签的可选属性:box-align
直接看代码吧：
box-align属性设置为top时：
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.father_box{
display: -moz-box;
display: -webkit-box;
display: box;
height:300px;
-moz-box-align:top;
-webkit-box-align:top;
-o-box-align:top;
box-align:top;
}
.child_box_one{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:red;
height:100px;
}
.child_box_two{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:blue;
height:200px;
}
.child_box_three{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:yellow;
height:100px;
}
</style>
</head>
<body>
<div class="father_box">
<div class="child_box_one">1</div>
<div class="child_box_two">2</div>
<div class="child_box_three">3</div>
</div>
</body>
</html>
结果：
image.png
可以看到三个子div是顶部对齐的。
box-align属性设置为center时：
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.father_box{
display: -moz-box;
display: -webkit-box;
display: box;
height:300px;
-moz-box-align:center;
-webkit-box-align:center;
-o-box-align:center;
box-align:center;
}
.child_box_one{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:red;
height:100px;
}
.child_box_two{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:blue;
height:200px;
}
.child_box_three{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background-color:yellow;
height:100px;
}
</style>
</head>
<body>
<div class="father_box">
<div class="child_box_one">1</div>
<div class="child_box_two">2</div>
<div class="child_box_three">3</div>
</div>
</body>
</html>
结果：
image.png
可以看到，三个子div是居中对齐的。
父标签的可选属性:box-pack
box-align控制了子div垂直方向上的对齐方式，box-pack则控制了子div水平方向上的对齐方式，可选值有：start | end | center | justify。
例如：justify属性值控制子div两端对齐：
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
.father_box{
display: -moz-box;
display: -webkit-box;
display: box;
height:300px;
-moz-box-pack:justify;
-webkit-box-pack:justify;
-o-box-pack:justify;
box-pack:justify;
}
.child_box_one{
/*-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;*/
background-color:red;
}
.child_box_two{
/*-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;*/
background-color:blue;
}
.child_box_three{
/*-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;*/
background-color:yellow;
}
</style>
</head>
<body>
<div class="father_box">
<div class="child_box_one">hahahaha1</div>
<div class="child_box_two">hahahaha2</div>
<div class="child_box_three">hahahaha3</div>
</div>
</body>
</html>
结果：
image.png
若将属性值改为end，效果则是：
image.png
