标签：
想做自适应的流体布局 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>
标签：
原文地址：http://www.cnblogs.com/3ershixiong/p/4747649.html
