CSS3 display:box 用法
CSS3 display:box 用法
css3 给display属性带来了box这个值，这个新值给开发带来了极大的方便。
其中的一个场景如下：
<div id=‘outer‘>
<div id=‘a1‘></div>
<div id=‘a2‘></div>
<div id=‘a3‘></div>
</div>假如我们想要使得内部的123元素水平以不同的比例分割outer所占的空间，以往的做法我们可能会让123元素浮动或者设置display属性为inline-block，然后再给width属性设置宽度百分比去分割outer。
使用display:box后可以这样实现：
#outer{
width:600px;
height:100px;
display:-moz-box;
display:-webkit-box;
display:box;
}
#a1{
background:blue;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
#a2{
background:green;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
#a3{
background:yellow;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}效果如下：
子元素中box-flex属性为该元素的占比，若想让此属性生效，父元素必须设置display:box。以a3为例，a3设置了box-flex为3，则他所占的宽度为600*(3/(1+2+3))为300px。
如果其中一个子元素设置了固定宽度100px，则剩下的500px将会参与到比例划分的规则中。
除此之外，还有几个与display:box相关的属性。
1.box-orient
horizontal | vertical | inline-axis | block-axis | inherit
用来确定子容器的排列方式（水平or垂直or。。。）
2.box-direction
normal | reverse | inherit
用来确定子容器的方向，如果设置为reverse，则刚才代码的显示效果为a3->a2->a1。
3、box-align
start | end | center | baseline | stretch
box-align表示父容器里面子容器的垂直对齐方式（顶部对齐or底部对齐or中线对齐。。。）
3、box-pack
start | end | center | justify
box-pack表示父容器里面子容器的水平对齐方式
分别代表
左对齐，右对齐，居中对齐，水平均分。
文章作者：forevercjl
文章原文链接：http://blog.csdn.net/ForeverCjl/article/details/45673739
转载请注明出处。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
