box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示:
start | end | center | justify
<article class="wrap"> <section class="sectionOne">01</section> <section class="sectionTwo">02</section> <section class="sectionThree">03</section> </article>
.wrap{ width:600px; height:108px; border:1px solid red; display:-moz-box; display:-webkit-box; display:box; -moz-box-pack:end; -webkit-box-pack:end; -o-box-pack:end; box-pack:end; } .wrap section{ width:100px; } .wrap .sectionOne{ background:orange; } .wrap .sectionTwo{ background:purple; } .wrap .sectionThree{ background:green; }
start
在box-pack表示水平居左对齐,如下图所示
![CSS3.0盒模型display:-webkit-box;的使用 - 文龍_八八三 - WenLong883_BLOG](http://img3.ph.126.net/-BzxewKiRbdMOXsqdulQAQ==/1040894463893105483.jpg)
end
在box-pack表示水平居右对齐,如下图所示
![CSS3.0盒模型display:-webkit-box;的使用 - 文龍_八八三 - WenLong883_BLOG](http://img7.ph.126.net/pKB0GJDEnJk3UDYx47Xc6g==/1037798239149286277.jpg)
center
在box-pack表示水平居中对齐,如下图所示
![CSS3.0盒模型display:-webkit-box;的使用 - 文龍_八八三 - WenLong883_BLOG](http://img2.ph.126.net/Qsz2oCxU5gqMn9G6VfRD7Q==/2519763991530893982.jpg)
justify
在box-pack表示水平等分父容器宽度(唯一遗憾的是,firefox与opera暂时不支持,只有safari、chrome支持)