<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>盒模型display:box;</title>
</head>
<body> <article class="wrap">
<section class="section sectionOne">01</section>
<section class="section sectionTwo">02</section>
<section class="section sectionThree">03</section>
</article> </body>
</html>
.wrap {
width: 600px;
height: 200px;
border: 1px solid #000000;
display: -webkit-box; /*这样元素就会内联化*/
display: -moz-box;
display: box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient: horizontal;
-webkit-box-direction: reverse;
box-direction: reverse;
-webkit-box-align: center;
box-align: center;
/*子容器的水平对其方式*/
-webkit-box-pack: justify;
}
.section {
width: 50px;
height: 80px;
}
.sectionOne {
background: orange;
/*
-webkit-box-flex:1;
box-flex:1;
*/
}
.sectionTwo {
background: purple;
/*
-webkit-box-flex:2;
box-flex:2;
*/
/*margin: 0 50px;*/
height: 108px;
}
.sectionThree {
background: green;
width: 100px;
}
注意：
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，
都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。
如果父容器选择vertical或block-axis属性对子容器进行垂直排列，
其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值，
其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，
其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。
效果：