8.1.6 弹性盒模型(1)

弹性盒模型

注意在使用弹性盒模型的时候 父元素必须要加display: box或display: inline-box

box-orient 定义盒模型的布局方向（写在父元素上 ）

　　Horizontal 水平显示（默认）

　　vertical 垂直方向

 

box-direction 元素排列顺序（写在父元素上 ）

　　Normal 正序（默认）

　　Reverse 反序

 

box-ordinal-group 设置元素的具体位置

 

box-flex 定义盒子的弹性空间

子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

 

box-pack 对盒子富裕的空间进行管理（水平方向）

　　start 所有子元素在盒子左侧显示，富裕空间在右侧

　　end 所有子元素在盒子右侧显示，富裕空间在左侧

　　center 所有子元素居中

　　justify 富余空间在子元素之间

 

box-align 在垂直方向上对元素的位置进行管理（垂直方向）

　　start 所有子元素在据顶

　　end 所有子元素在据底

　　center 所有子元素居中

问：未知宽高的块元素如何在屏幕中水平垂直居中？（请看以下代码）

css

*{ padding: 0; margin: 0; }
html, body{ height: 100%; }
.box{ height: 100%; font-size:20px; color: #fff; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; }
.box div{ width: 100px; height: 100px;background: red; border: 1px solid #fff; }

html

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>