display:box

 

 

box属性

box-orient    ：用来确定父容器里子容器的排列方式，是水平还是垂直。
box-direction ：用来确定父容器里的子容器排列顺序
box-align     ：父容器里面子容器的垂直对齐方式
box-pack      ：父容器里面子容器的水平对齐方式
box-flex      :主要让子容器针对父容器的宽度按一定规则进行划分
box-lines 

 

 

1.box-flex
box-flex主要让子容器针对父容器的宽度按一定规则进行划分
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;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;
}
.sectionThree{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background:green;
}

展示效果：

 

 

 

sectionTwo子容器添加margin:0px 50px使子容器之间产生一定的间隔其宽度

CSS代码：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
        margin:0px 50px;//添加margin属性
}
.sectionThree{
    width:200px;
    background:green;
}

展示效果：

说明：
父容器的宽度600px减去设置了子容器的200px基础上再减去100px(2×50)剩下300px，这300px宽度值则按box-flex设置的值进行划分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。

 

2、box-orient
box-orient(orient译为排列更准确)用来确定父容器里子容器的排列方式，是水平还是垂直。可选属性如下所示：

horizontal | vertical | inline-axis | block-axis | inherit

horizontal、inline-axis说明：
给box设置horizontal或inline-axis属性其效果似乎表现一致，都可将子容器水平排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择horizontal或inline-axis属性对子容器进行水平排列，其是对父容器的宽度进行分配划分。此时如果父容器定义了高度值，其子容器的高度值设置则无效状态，所有子容器的高度等于父容器的高度值；如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。
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-orient:horizontal;
	-webkit-box-orient:horizontal;
	box-orient:horizontal;//水平排列
}
.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;
}

展示效果：

 

vertical、block-axis说明：
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。如果父容器选择vertical或block-axis属性对子容器进行垂直排列，其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值，其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。
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-orient:vertical;
	-webkit-box-orient:vertical;
	box-orient:vertical;//垂直排列
}
.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{
	height:100px;
	background:green;
}

展示效果：

inherit说明：
inherit属性则是让子容器继承父容器的相关属性。

 

3、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;
}

展示效果：

 

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

 

5、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支持）