css3弹性盒模型实例介绍

CSS3带来了全新的盒模型——弹性盒模型，这个模型彻底改变了盒子在网页中的排列方式和空间处理方式。这一创新理念与火狐浏览器使用的用户交互语言XUL以及其他语言如XAML、GladeXML等所采用的盒模型有着异曲同工之妙。利用这个模型，设计师们可以轻松地创建出自适应浏览器窗口的流动布局，或者是根据字体大小自由调整的弹性布局。

假设我们有以下的HTML代码片段：

```html

```

在传统的盒模型中，这些盒子会基于HTML流在垂直方向上依次排列。弹性盒模型允许我们灵活地规定盒子的排列顺序，甚至可以反转默认的排列方向。要启用弹性盒模型，只需将包含子盒子的盒子的display属性设置为box（或inline-box）即可。

例如，通过以下CSS代码，我们可以实现盒子的水平或垂直分布：

```css

body {

display: box;

box-orient: horizontal; / 或 vertical /

}

```

通过“box-direction”属性，我们可以进一步设置盒子的排列顺序。默认情况下，盒子会跟随HTML流进行分布，但如果我们设置为“reverse”，就可以反转盒子的排列顺序。

“box-ordinal-group”属性让我们能够更具体地控制盒子的分布顺序。我们可以为每个盒子分配一个数字，盒模型将首先分布这些组内的盒子，然后再按照数字从小到大进行排列。例如：

```css

body {

display: box;

box-orient: vertical;

box-direction: reverse;

}

box1 { box-flex: 1; box-ordinal-group: 2; }

box2 { box-flex: 2; box-ordinal-group: 2; }

box3 { box-flex: 2; box-ordinal-group: 1; }

```

在这个例子中，盒子尺寸并不是固定的。只有当盒子的“box-flex”属性值至少为1时，它才会变得具有弹性。这个属性决定了盒子如何根据父容器的宽度进行自适应。在这个例子中，三个子盒子分别设置了1、2、2的box-flex值，意味着父容器会被分成5等份，每个盒子占据其中的一份。如果盒子不具有弹性，它将尽可能地扩大以显示其内容，而不会发生溢出。盒子的大小可以通过“width”和“height”属性（或其最小、最大变体）来控制。这样，我们就能通过弹性盒模型创建出自适应性强、灵活多变的网页布局。