box-pack

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
end
在box-pack表示水平居右对齐,如下图所示
 CSS3.0盒模型display:-webkit-box;的使用 - 文龍_八八三 - WenLong883_BLOG
center
在box-pack表示水平居中对齐,如下图所示
 CSS3.0盒模型display:-webkit-box;的使用 - 文龍_八八三 - WenLong883_BLOG
justify
在box-pack表示水平等分父容器宽度(唯一遗憾的是,firefox与opera暂时不支持,只有safari、chrome支持)
 
原文地址:https://www.cnblogs.com/theWayToAce/p/6993043.html