HTML代码:
XML/HTML Code复制内容到剪贴板
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>
CSS代码:
CSS Code复制内容到剪贴板
.wrap{
width:600px;
height:108px;
display:-moz-box;
display:-webkit-box;
display:box;
-moz-box-align:stretch;
-webkit-box-align:stretch;
-o-box-align:stretch;
box-align:stretch;
}
.wrap section{
height:80px;
}
.wrap .sectionOne{
background:orange;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
.wrap .sectionTwo{
background:purple;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
height:108px;
}
.wrap .sectionThree{
width:100px;
background:green;
}
start
在box-align表示居顶对齐,如下图所示
end
在box-align表示居底对齐,如下图所示
center
在box-align表示居中对齐,如下图所示
stretch
在box-align表示拉伸,拉伸到与父容器等高
4、box-pack
box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示:
start | end | center | justify
HTML代码:
XML/HTML Code复制内容到剪贴板
<article>
<section>01</section>
<section>02</section>
<section>03</section>
</article>
CSS代码:
CSS Code复制内容到剪贴板
.wrap{
width:600px;
height:108px;
border:1px solid red;
display:-moz-box;
display:-webkit-box;
display:box;










