盒布局

启动盒布局

拥有子盒子的盒子设置display值：
display：box或者display：inline-box

盒布局由两部分组成：父容器和子容器
父容器通过display：box启动盒布局

属性

定义宽度——box-flex

默认情况下，盒子并不具有弹性；如果 box-flex 的属性值至少为 1 时 ， 则变得富有弹性。如果盒子具有弹性，它将尽可能地宽，使其内容可见，且没有任何溢出，其大小由 width 和 height 属性值，或者 min-height、 min-width 、 max-width、 max-height 属性值来决定 。
如果盒子没有任何大小声明，那么其大小将完全取决于父盒子的大小，即子盒子的大小等于父盒子的大小乘以其 box-flex 在所有子盒子 box-flex 总和中的百分比。
子盒子的大小=父大小*子盒子的box-flex/所有子盒子的box-flex值的和

如果包含三个子盒子，两个定义了width，另外一个使用box-flex：1表示占用位置为剩余中间区域

定义顺序——box-ordinal-group

box-ordinal-group：1，2，……，浏览器根据序号大小进行显示

定义方向——Box-orient

Box-orient：vertical表示垂直排列，horizontal表示水平（默认）

定义对齐方式——box-pack和box-align

当为horizontal水平排列时：
Start：box-pack表示最左边显示，box-align为最顶部显示
Center：box-pack表示中部显示，box-align中部显示
End：右边，底部
当为vertical垂直排列时：
Start：box-pack表示最左边显示，box-align为最顶部显示
Center：box-pack表示中部显示，box-align中部显示
End：右边，底部
如下就是居中对齐：

display: -moz-box ;
display: -WebKit-box;
moz-box-align: center ;
-WebKit- box-align : center ;
-m.oz - box- pack : center;
-WebKit-box-pack : center;