css3弹性盒子模型之box-flex(续)

二、box属性
上篇文章”css3弹性盒子模型之box-flex“将box-flex如何对父容器的宽度进行划分分配讲解完毕,下面在看一下父容器里面的box属性包括哪些box属性,具体属性如下代码所示:

box-orient | box-direction | box-align | box-pack | box-lines


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

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

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

HTML代码:

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">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 class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">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属性则是让子容器继承父容器的相关属性。

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

normal | reverse | inherit

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

HTML代码:

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">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 class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">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 class="wrap">
	<section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">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 class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">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支持)

转载请注明出自于”css3Doctor.com“多谢!

1 thought on “css3弹性盒子模型之box-flex(续)”

Comments are closed.