想做自适应的流体布局 box很有用 。 还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。
有以下属性：box-orient 子元素排列方式(水平还是竖直) vertical horizontal inline-axis block-axis
box-flex 子元素之间比例
box-align 子元素垂直对齐方式 start end center baseline stretch
box-pack 子元素水平对齐方式 start end center justify
box-direction normal reverse
1. box-orient horizontal 和 inline-axis 是水平排列 vertical 和 block-axis 是竖直排列
2. box-flex 子元素之间比例 如果有一个像固定宽度 直接写像素 比例为0即可
3. box-align normal 按正常顺序显示 reverse 反转顺序
4. box-align start 居顶对齐 end 居底对齐 center 居中对齐 stretch 拉伸到父容器等高
5. box-pack start 居左对齐 end 居右对齐 center 居中对齐 justify 水平等分父容器宽度（firefox与opera暂时不支持，只有safari、chrome支持）
上代码 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
display: box;
display: -webkit-box;
display: -moz-box;
display: -o-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-o-box-orient:horizontal;
padding: 10px;
padding-right: 0px;
width:100%;
height:300px;
background: green;
}
.item{
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-o-box-flex:1;
height:100%;
margin-right:10px;
background: grey;
}
.item:first-of-type{
box-flex:0;
-webkit-box-flex:0;
-moz-box-flex:0;
-o-box-flex:0;
width:200px;
}
.item:nth-of-type(2){
box-flex:2;
-webkit-box-flex:2;
-moz-box-flex:2;
-o-box-flex:2;
}
</style>
</head>
<body>
<div class = "box">
<div class = "item">column1</div>
<div class = "item">column2</div>
<div class = "item">column3</div>
</div>
</body>
