css3盒子模型display:box

display:box;box-flex是css3的一个新特性，可以实现布局的垂直等高、水平均分、按比例划分。

box-flex：主要让子容器针对父容器的宽度按一定规则进行划分

注意：使用box-flex的时候，必须给父容器指定display:box，子容器才可以进行划分，box-flex是划分规则如：box-flex为2、1意味着，可以把父容器按2:1进行划分

，如果一个子容器设置了固定宽度，则按照减去了固定宽度后按照2:1进行划分。

box:主要有这些属性box-orient|box-direction|box-align|box-pack|box-lines

box-orient:用来确定容器的排列方式，水平还是垂直，可选属性如下：horizontal|vertical|inline-axis|inherit

horizontal、inline-axis都可以将子容器水平排列，此时如果父容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值；如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。

vertical、block-axis:都可以将子容器垂直排列，此时如果父容器定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。

inherit属性则是让子容器继承父容器的相关属性。

box-direction:用来确定子容器排列顺序 normal|reverse|inherit

normal:默认值，按照html文档里的先后顺序依次展示

reverse：反转，也就是按照normal倒过来排序

box-align:子容器的垂直对其方式 start|end|center|baseline|streth

start:居顶对齐

end:居地对齐

center:居中对齐

stretch:拉伸，与父容器等高

box-pack:子容器的水平对齐方式 start|end|center|justify

justify:水平等分父容器宽度（firefox\opera暂不支持该属性)

 

<div class="task-board-box">
   <div class="task-board">
   </div>
   <div class="task-board">
   </div>
   <div class="task-board">
    </div>
</div>

.task-board-box {
-ms-flex-align: start;
-moz-box-align: start;
-webkit-box-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
-moz-box-orient: horizontal;
/* position: static \9; */
}

.task-board-wrap {
background-color: #e3e3e3;
width: 260px;
margin-right: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-ms-flex: 0 0 260px;
position: relative;
float: left \9;
display: block \9;
margin-bottom: 5px;
}