css3的display:box研究

针对移动端webkit开发，网上提倡的观点是放弃float.用css3的-webkit-box来实现水平布局。

 那么就要用到display:box;和box-flex属性

 

他俩是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

 

box-flex属性 ===用于子元素，设置划分比例

 

 

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。

 父元素设置display:box；后其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center);

若其子元素设置了，左右margin，或者宽度，则其子元素划分的值域是父元素宽度减掉左右margin，或者宽度后的值域；

 

 

2、box-direction
box-direction用来确定父容器里的子容器排列顺序，具体属性如下代码所示：

normal | reverse | inherit

normal是默认值
按照HTML文档里结构的先后顺序依次展示。如下代码，如果box-direction设置为normal，则结构依次展示sectionOne、sectionTwo、sectionThree.
HTML代码：

<article>     <section>01</section>     <section>02</section>     <section>03</section> </article> 

CSS代码：

.wrap{ 	width:600px; 	height:200px; 	display:-moz-box; 	display:-webkit-box; 	display:box; 	-moz-box-direction:normal;//设置mormal默认值 	-webkit-box-direction:normal;//设置mormal默认值 	box-direction:normal;//设置mormal默认值 } .sectionOne{ 	background:orange; 	-moz-box-flex:1; 	-webkit-box-flex:1; 	box-flex:1; } .sectionTwo{ 	background:purple; 	-moz-box-flex:2; 	-webkit-box-flex:2; 	box-flex:2; } .sectionThree{ 	width:100px; 	background:green; } 

展示效果：

reverse表示反转:
如上面所示设置nomal其结构的排列顺序为sectionOne、sectionTwo、sectionThree；如果设置reverse反转，其结构的排列顺序为sectionThree、sectionTwo、sectionOne.
HTML代码：

<article>     <section>01</section>     <section>02</section>     <section>03</section> </article> 

CSS代码：

.wrap{ 	width:600px; 	height:200px; 	display:-moz-box; 	display:-webkit-box; 	display:box; 	-moz-box-direction:reverse;//设置为反转 	-webkit-box-direction:reverse;//设置为反转 	box-direction:reverse;//设置为反转 } .sectionOne{ 	background:orange; 	-moz-box-flex:1; 	-webkit-box-flex:1; 	box-flex:1; } .sectionTwo{ 	background:purple; 	-moz-box-flex:2; 	-webkit-box-flex:2; 	box-flex:2; } .sectionThree{ 	width:100px; 	background:green; } 

展示效果：

3、box-align
box-align表示父容器里面子容器的垂直对齐方式，可选参数如下所示：

start | end | center | baseline | stretch

HTML代码：

<article> <section>01</section>     <section>02</section>     <section>03</section> </article> 

CSS代码：

.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表示拉伸，拉伸到与父容器等高

3、box-pack
box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：

start | end | center | justify

HTML代码：

<article>     <section>01</section>     <section>02</section>     <section>03</section> </article> 

CSS代码：

.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表示水平居左对齐，如下图所示

end
在box-pack表示水平居右对齐，如下图所示

center
在box-pack表示水平居中对齐，如下图所示

justify
在box-pack表示水平等分父容器宽度（唯一遗憾的是，firefox与opera暂时不支持，只有safari、chrome支持）