弹性盒子是css自适应布局的一种好用的方法，有了它可以减少浮动的使用（避免清浮动）.
首先考虑一下兼容性
基本高版本主流浏览期都兼容,不过需要加前缀 最新写法为display:flex但是实际很多国产浏览器并不兼容,所以我还是用的display:box的写法并没有兼容两种.
所以主要介绍-webkit-box,想了解flex属性可以查看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html（用法不太一样呀回来要整理整理）
写法为父级display后，子元素自动成为容器成员,并且float、clear和vertical-align属性将失效.
.box{
display:box;
display:-webkit-box;/*(会与display:block冲突)*/
-webkit-box-align:center;
-webkit-box-pack:center;
} /*(主要做移动端只加了webkit)*/
父级容器box-align表示子集在y轴的排列方式 start | end | center | baseline | stretch start表示顶边对齐，end为底部对齐，center为居中对齐，baseline表示基线（英文字母o,m,n等的底边位置线）对齐，stretch 伸缩和父级等高.
父级容器box-pack表示子集在x轴的排列方式 start | end | center | justify 与父标签的起始位置对齐 末尾 居中 两端对齐
box-pack-justify两端对齐可以用来 设置两端对齐的标题例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tit{
height:200px;
width:200px;
background:red;
display:-webkit-box;
display:-moz-box;
display:box;
-webkit-box-align:center;
-webkit-box-pack:justify;
padding:0 20px;
color:#fff;
}
.tit div:nth-child(1){
height:40px;
width:60px;
background:#000;
text-align:center;
}
.tit div:nth-child(2){
height:30px;
width:40px;
background:#000;
text-align:center;
}
</style>
</head>
<body>
<div class=‘tit‘>
<div>左</div>
<div>右</div>
</div>
</body>
</html>
如果背景相同可以设置两端对齐也可以用table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tit{
height:200px;
width:200px;
background:red;
padding:0 20px;
color:#fff;
display:table;
}
.tit div:nth-child(1){
height:40px;
width:60px;
text-align:left;
display:table-cell;
vertical-align: middle;
}
.tit div:nth-child(2){
height:30px;
width:40px;
text-align:right;
display:table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class=‘tit‘>
<div>左</div>
<div>右</div>
</div>
</body>
</html>
box-orient可以设置排序方式 horizontal(水平) vertival (垂直)
子集容器可以设置-webkit-box-flex属性
表示占父级容器分割的分数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.tit{
height:200px;
width:200px;
background:red;
padding:0 20px;
color:#fff;
display:-webkit-box;
display:-moz-box;
display:box;
}
.tit div:nth-child(1){
height:40px;
background:#000;
-webkit-box-flex:1;/*占总数1/3*/
}
.tit div:nth-child(2){
height:30px;
-webkit-box-flex:2;/*占总数2/3*/
background:#000;
}
</style>
</head>
<body>
<div class=‘tit‘>
<div>左</div>
<div>右</div>
</div>
</body>
</html>
注意: 如果两个box-flex 的值设置相同, 会均分父级宽度 。注意如果子集内容不同，会出现不能均分情况需要加个任意宽度 ,width:0%;width:100%;之类的都可以.
<div class=‘tit‘>
<div>左123</div>
<div>右456888</div>
</div>