启动盒布局
拥有子盒子的盒子设置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;