您现在的位置： 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文
CSS3灵活的盒子模型(Flexible Box Module)
作者：佚名 责任编辑：admin 更新时间：2022-06-22
CSS3 标准里引入了一些新的盒子模型参数，在 CSS2 的基础上，我们将能更灵活地调整页面上各个容器的大小和位置。详细的说明可以看这个文档。
通过学习和测试，我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处。在这篇文章中，我的所有例子都基于以下 HTML代码：
以下为引用的内容：
<body> <div id="box1">1</div> <div id="box2">2</div> <div id="box3">3</div> </body>
容器的排列
在通常的情况下，页面上所有容器的顺序都按照载入的顺序排列。而使用 CSS3 提供的功能后，我们可以在不改变 HTML 结构的前提下随意改变容器显示的位置，这样不但给排版带来极大的方便，我们也可以利用这些功能进行流量整形。
在需用使用灵活盒子模型(Flexible Box Module)的时候，我们需要先把其父容器的 Display 属性设置为 box 或者 inline-box 。
水平分布和垂直分布
我们可以通过 box-orient 属性指定容器的分布轴，当这个属性的值为 vertical 时其子容器将垂直分布（也可以为 block-axis ），当值为 horizontal 时其子容器讲水平分布（也可以为 inline-axis ）。在本文的第一个例子里我使用了以下的 CSS ：
以下为引用的内容：
#exemple1 .content{
-moz-box-orient : horizontal;
-webkit-box-orient : horizontal;
box-orient : horizontal;
}
#exemple1 .boite{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}
具体的效果可以看这个 DEMO ，三个子 Div 容器都横向并列了。
注：这个效果在 CSS2 里理论上也可以通过 Display: inline; 实现，但由于某些浏览器的 BUG ，没人会这样做。
反序排列
box-direction 属性可以让我们随意改变容器的显示顺序。我们知道，在默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的，但现在通过 box-direction 属性我们可以让最后加载的 block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边。
但在使用这个属性的时候要注意它可能会改变元素的某些属性，产生一些不能控制的效果。
在第二个例子里，我使用了以下的 CSS ：
以下为引用的内容：
#exemple2 .content{
-moz-box-orient : vertical;
-moz-box-direction : reverse;
-webkit-box-orient : vertical;
-webkit-box-direction : reverse;
box-orient : vertical;
box-direction : reverse;
}
#exemple2 .boite{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}
效果大家可以看这个 DEMO。可以发现，在不改变 HTML 结构的情况下，容器的排列顺序改变了。
按指定顺序排列
我们不但可以让一组同级容器反序排列，而且还可以让它们按自己喜欢的顺序排列，box-ordinal-group 属性可以帮我们做到这一点。通过 box-ordinal-group 为各个容器指定一个序号，默认情况下他们将会按照序号递增的顺序排列。要注意的是：没有指定序号的容器默认都为 1 ，并且序号相同的元素将按照加载顺序排列。大家可以看一下下面的 CSS ：
以下为引用的内容：
#exemple3 .content{
-moz-box-orient : vertical;
-moz-box-direction : reverse;
-webkit-box-orient : vertical;
-webkit-box-direction : reverse;
box-orient : vertical;
box-direction : reverse;
}
#exemple3 .boite{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}
#exemple3 .v1{
-moz-box-ordinal-group : 2;
-webkit-box-ordinal-group : 2;
box-ordinal-group : 2;
}
#exemple3 .v2{
-moz-box-ordinal-group : 2;
-webkit-box-ordinal-group : 2;
box-ordinal-group : 2;
}
#exemple3 .v3{
-moz-box-ordinal-group : 1;
-webkit-box-ordinal-group : 1;
box-ordinal-group : 1;
}
在上面的 CSS 里，我把第一和第二个容器的序号都定为 2 ，第三个容器序号为 1 ，因此最终效果应该是 v3 排在第一，v1 和 v2 则根据加载顺序，v1 排在 v2 前面。效果可以看这个 DEMO。
后记
CSS3 真的非常强大，我相信在它普及以后，我们做网页的时候将可以减少大量的 JavaScript 。关于 CSS3 盒子模型的介绍还没完，这篇文章只介绍了一下容器的排序，下一次将说说容器的尺寸。欢迎订阅本博客，以即时获知最新的更新。
说说 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;
}
大家可以看这个 DEMO 的效果。我们可以发现，子容器1和子容器2的宽度是在父容器宽度减去子容器3的宽度以后剩下的空间里分配的，这点和使用百分比作为 width 时直接根据父容器的宽度进行计算有很大的不同，使用 box-flex 能使子容器自动适应尺寸的变化，节省了很多调试时间。
空间的分配
因为我们可以把具有固定尺寸和灵活尺寸的子容器混合使用，并且也可以给父容器赋予灵活的尺寸。因此在最终的成品里我们可能会遇到父容器空间过余或者不足的情况。为了更合理地利用父容器提供的空间，box-align 和 box-pack 属性可以帮助我们。
box-pack 属性
box-pack 属性可以用于设置子容器在水平轴上的空间分配方式，它共有四种可能值：start，end，justify 和 center。这些值的含义如下：
start ：所有子容器都分布在父容器的左侧，右侧留空
end ：所有子容器都分布在父容器的右侧，左侧留空
justify ：所有子容器平均分布（默认值）
center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）
box-align 属性
box-align 属性用于管理子容器在竖轴上的空间分配方式，共
- 上一个程序编程： 如何使CSS渲染更高效
- 下一个程序编程： CSS3属性box-shadow使用教程
