深入了解 CSS3 新特性（7）

look_w

CSS3 的盒子模型盒子模型为开发者提供了一种非常灵活的布局方式，但是支持这一特性的浏览器并不多，目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox。
下面我们来介绍一下他是如何工作的，参考如下代码：
清单 22. CSS3 盒子模型

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="boxcontainer">            <div class="item">                1            </div>            <div class="item">                2            </div>            <div class="item">                3            </div>            <div class="item flex">                4            </div>        </div>

默认情况下，如果“boxcontainer”和“item”两个 class 里面没有特殊属性的话，由于 div 是块状元素，所以他的排列应该是这样的：
图 16. CSS3 盒子模型效果图下面，我们加入相关 CSS3 盒子模型属性：
清单 23. CSS3 盒子模型（水平排列）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.boxcontainer {                width: 1000px;                display: -webkit-box;                display: -moz-box;                -webkit-box-orient: horizontal;                -moz-box-orient: horizontal;            }                         .item {                background: #357c96;                font-weight: bold;                margin: 2px;                padding: 20px;                color: #fff;                font-family: Arial, sans-serif;            }

注意这里的“display: -webkit-box; display: -moz-box;”，它针对 webkit 和 gecko 浏览器定义了该元素的盒子模型。注意这里的“-webkit-box-orient: horizontal;”，他表示水平排列的盒子模型。此时，我们会看到如下效果：
图 17. CSS3 盒子模型（水平排列）效果图细心的读者会看到，“盒子”的右侧多出来了很大一块，这是怎么回事呢？让我们再来看一个比较有特点的属性：“flex”， 参考如下代码：
清单 24. CSS3 盒子模型（flex）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<div class="boxcontainer">            <div class="item">                1            </div>            <div class="item">                2            </div>            <div class="item">                3            </div>            <div class="item flex">                4            </div>        </div> .flex {     -webkit-box-flex: 1;     -moz-box-flex: 1; }

您看到什么区别了没？在第四个“item 元素”那里多了一个“flex”属性，直接来看看效果吧：
图 18. CSS3 盒子模型（flex）效果图第四个“item 元素”填满了整个区域，这就是“flex”属性的作用。如果我们调整一下“box-flex”的属性值，并加入更多的元素，见如下代码：
清单 25. CSS3 盒子模型（flex 进阶）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<div class="boxcontainer">            <div class="item">                1            </div>            <div class="item">                2            </div>            <div class="item flex2">                3            </div>            <div class="item flex">                4            </div>        </div> .flex {     -webkit-box-flex: 1;     -moz-box-flex: 1; } .flex2 {     -webkit-box-flex: 2;     -moz-box-flex: 2; }

我们把倒数第二个元素（元素 3）也加上“box-flex”属性，并将其值设为 2，可见其效果图如下：
图 19. CSS3 盒子模型（flex 进阶）效果图由此可见，元素 3 和元素 4 按比例“2:1”的方式填充外层“容器”的余下区域，这就是“box-flex”属性的进阶应用。
还有，“box-direction”可以用来翻转这四个盒子的排序，“box-ordinal-group”可以用来改变每个盒子的位置：一个盒子的 box-ordinal-group 属性值越高，就排在越后面。盒子的对方方式可以用“box-align”和“box-pack”来设定。