CSS3灵活的盒子模型(Flexible Box Module)–2

继上一篇《CSS3 灵活的盒子模型(Flexible Box Module) – 1》后继续深入,说说 CSS3 里盒子模型的尺寸。本文的 HTML 框...

继上一篇《CSS3 灵活的盒子模型(Flexible Box Module) – 1》后继续深入,说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module) – 1》。

在 CSS2 里,要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为 33.3%,这种方法无法把父容器的宽度完全填充,在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。令一种方法是通过计算把子容器的 width 都设为一个固定值,这种方法比较繁琐,而且在一些情况下无法使子容器的宽度完全相等(例如父容器的宽度为 100px)。当我们迈入 CSS3 时代后,这种问题将迎刃而解。

box-flex 属性

box-flex 应用在需要分栏的子容器上,它的值必须是一个自然数或小数。当父容器里有多个带有 box-flex 属性的子容器时,浏览器将会把这些子容器的 box-flex 的值相加,然后根据它们各自的值占总值的比例,再在父容器剩余的空间里分配它们的尺寸(说的啰嗦,其实一看 DEMO 就懂)。也就是说,我们需要注意 box-flex 属性必须在父框架具有具体的 width 或者 height 的时候才能正常渲染。

灵活的尺寸

在这个例子里,我将使子容器2和3的宽度相等,并且子容器1的宽度为它们的两倍。由于使用了 box-flex 属性,如果再插入一个子容器的话,已有的容器宽度将会自动调整。CSS 如下:

以下为引用的内容:

#exemple4 .content{
	-moz-box-orient : horizontal;
	-webkit-box-orient : horizontal;
	box-orient : horizontal;
}
#exemple4 .v1{
	-moz-box-flex: 2;
	-webkit-box-flex: 2;
	box-flex: 2;
}
#exemple4 .v2{
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
}
#exemple4 .v3{
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
}
标签: cssflexiblebox

更多 flexible 相关内容