弹性盒子模型有两种规范：早起的display:box 和后期的display:flex。它可以轻易的实现均分、浮动、居中等灵活布局，在移动端只考虑webkit内核时很实用。
一、display:box
<div class="container">
<div class="box1">box1<br/>固定宽度</div>
<div class="box2">box2<br>占满剩余宽度</div>
</div> <style type="text/css">
.container{
width: 400px;
height: 120px;
border: 1px solid #ccc;
display: -webkit-box;
display: box;
-webkit-box-align: center;
box-align: center;
/*垂直方向对齐方式 box-align: start|end|center|baseline|stretch;*/
/*水平方向对齐方式 box-pack: start|end|center|justify;*/
}
.box1,.box2{
height: 100px;
margin: 0;
padding: 0;
}
.box1{
background: #aaa;
width: 100px;
}
.box2{
background: #ccc;
-webkit-box-flex:1.0;
box-flex:1.0;
}
</style>
二、display:flex
<div class="container">
<div class="box1">固定宽度</div>
<div class="box2">剩余空间的1/3</div>
<div class="box3">剩余空间的2/3</div>
</div> <style type="text/css">
.container{
width: 400px;
height: 120px;
border: 1px solid #ccc;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center ;
/*水平方向对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around;*/
/*垂直方向对齐方式 align-items: flex-start | flex-end | center | baseline | stretch;*/
}
.box1,.box2,.box3{
height: 100px;
}
.box1{
background: #bbb;
width: 100px;
}
.box2{
background: #ccc;
-webkit-flex:1;
flex:1;
}
.box3{
background: #ddd;
-webkit-flex:2;
flex:2;
}
</style>