CSS3 机动的盒子模子(Flexible Box Module)-2

继上一篇《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;
}

结果可以看这个 DEMO。各人也可以下载这个 DEMO，实行添加一个新的子容器，它是不是自动顺应了。

自顺应子容器和牢靠尺寸子容器的殽杂行使

box-flex 的另一个强盛之处是可以和具有牢靠尺寸的容器殽杂行使。我把上面的例子改一改，子容器3改成牢靠宽度160px，其余的保持稳固，看看有什么结果。

#exemple5 .content{
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
}
#exemple5 .v1{
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
}
#exemple5 .v2{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}

#exemple5 .v3{
width: 160px;
}

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!