弹性盒模型

注意在使用弹性盒模型的时候父元素必须要加display:-webkit-box 或 display:-webkit-inline-box（为方便学习只写一种浏览器内核，项目中要写全）

Box-orient 定义盒模型的布局方向

Horizontal 水平显示

vertical 垂直方向

box-direction 元素排列顺序

Normal 正序

Reverse 反序

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

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}
.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}
.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}
.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}
.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}

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

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

.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){width:300px;}
.box div:nth-of-type(2){-webkit-box-flex:2;}
.box div:nth-of-type(3){-webkit-box-flex:3;}
.box div:nth-of-type(4){-webkit-box-flex:4;}
.box div:nth-of-type(5){-webkit-box-flex:5;}

</style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>

box-pack 对盒子富裕的空间进行管理

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

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

Center 所有子元素居中

Justify 富余空间在子元素之间平均分布

html{height:100%;}
body{height:100%;margin:0;}
.box{height:100%; display:-webkit-box;-webkit-box-direction:Reverse; font-size:20px;color:#fff;-webkit-box-pack:center; -webkit-box-align:center;}
.box div{width:100px;height:100px;background:red;border:1px solid #fff;}
</style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>

webkit-box-align:center：在垂直方向上对元素的位置进行管理

Star 所有子元素在据顶

End 所有子元素在据底

Center 所有子元素居中