深入理解 CSS3 弹性盒布局模型（7）浏览器支持

look_w

浏览器支持由于弹性盒模型规范本身有过多个不同的版本，因此浏览器对于该规范的支持也存在一些不一致。浏览器一共支持 3 个不同版本规范的语法：

• 新规范：最新版本规范的语法，即"display: flex"。
• 中间版本：2011 年的非官方规范的语法，即"display: flexbox"。
• 老规范：2009 年的规范的语法，即"display: box"。

浏览器的支持情况如下所示。
表 6. 弹性盒布局模型的浏览器支持ChromeSafariFirefoxOperaIEAndroid21+（新规范）
20-（老规范）6.1+（新规范）
3.1+（老规范）22+（新规范）
2-21（老规范）12.1+（新规范）11+（新规范）
10（中间版本）4.4+（新规范）
2.1+（老规范）
从中可以看到，弹性盒布局模型已经被主流的浏览器所支持。不过为了支持不同版本的浏览器，在使用时除了规范中定义的属性之外，还需要添加相应的浏览器前缀形式，如所示。
清单 11. 弹性盒布局模型的浏览器前缀形式

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

.flex-container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex-item { -webkit-box-flex: auto; -moz-box-flex: auto; -webkit-flex: auto; -ms-flex: auto; flex: auto; } .flex-item { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; }

对于这些浏览器相关的前缀，最好使用 autoprefixer 这样的工具来进行处理。
总结作为 CSS3 规范的一部分，弹性盒布局模型可以在很多典型的场景中简化完成布局所需的 CSS 代码。该布局模型也提供了很多实用的特性来满足常见的布局要求，包括对容器中条目的排列、对齐、调整大小和分配空白空间等。弹性盒布局模型可以作为 Web 开发人员工具箱中的一个很好的工具。