css3 display:box

想做自适应的流体布局 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>