下面示例根据上节介绍的方法，使用不同版本语法，设计一个兼容不同设备和浏览器的弹性页面，演示效果如图23.20所示。
图23.20 定义混合伸缩盒布局
示例主要代码如下：
<style type="text/css">
.page-wrap {
display: -webkit-box; /* 2009版 - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* 2009版 - Firefox 19- (存在缺陷) */
display: -ms-flexbox; /* 2011版 - IE 10 */
display: -webkit-flex; /* 最新版 - Chrome */
display: flex; /* 最新版 - Opera 12.1, Firefox 20+ */
}
.main-content {
-webkit-box-ordinal-group: 2; /* 2009版 - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* 2009版 - Firefox 19- */
-ms-flex-order: 2; /* 2011版 - IE 10 */
-webkit-order: 2; /* 最新版 - Chrome */
order: 2; /* 最新版 - Opera 12.1, Firefox 20+ */
width: 60%; /* 不会自动伸缩,其他列将占据空间 */
-moz-box-flex: 1; /* 如果没有该声明，主内容（60%）会伸展到和最宽的段落，就像是段落设置了white-space:nowrap */
background: white;
}
.main-nav {
-webkit-box-ordinal-group: 1; /* 2009版 - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1; /* 2009版 - Firefox 19- */
-ms-flex-order: 1; /* 2011版 - IE 10 */
-webkit-order: 1; /* 最新版 - Chrome */
order: 1; /* 最新版 - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1; /* 2009版 - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* 2009版 - Firefox 19- */
width: 20%; /* 2009版语法, 否则将崩溃 */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* 最新版 - Opera 12.1, Firefox 20+ */
background: #ccc;
}
.main-sidebar {
-webkit-box-ordinal-group: 3; /* 2009版 - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 3; /* 2009版 - Firefox 19- */
-ms-flex-order: 3; /* 2011版 - IE 10 */
-webkit-order: 3; /* 最新版 - Chrome */
order: 3; /* 最新版- Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1; /* 2009版 - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* Firefox 19- */
width: 20%; /* 2009版，否则将崩溃. */
-ms-flex: 1; /* 2011版 - IE 10 */
-webkit-flex: 1; /* 最新版 - Chrome */
flex: 1; /* 最新版 - Opera 12.1, Firefox 20+ */
background: #ccc;
}
.main-content, .main-sidebar, .main-nav { padding: 1em; }
body {padding: 2em; background: #79a693;}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
h1, h2 {
font: bold 2em Sans-Serif;
margin: 0 0 1em 0;}
h2 { font-size: 1.5em; }
p { margin: 0 0 1em 0; }
</style>
<div class="page-wrap">
<section class="main-content">
<h1>水调歌头·明月几时有</h1>
……
</section>
<nav class="main-nav">
<h2>宋词精选</h2>
……
</nav>
<aside class="main-sidebar">
<h2>词人列表</h2>
……
</aside>
</div>
页面被包裹在类名为page-wrap的容器中，容器包含三个子模块。现在将容器定义为伸缩容器，此时每个子模块自动变成了伸缩项目。
<div class="page-wrap"> <section class="main-content"> </section> <nav class="main-nav"></nav> <aside class="main-sidebar"></aside> </div>
本示例设计各列在一个伸缩容器中显示上下文，只有这样这些元素才能直接成为伸缩项目，它们之前是什么没有关系，只要现在是伸缩项目即可。
本示例把Flexbox旧的语法、中间混合语法和最新的语法混在一起使用，它们的顺序很重要。display属性本身并不添加任何浏览器前缀，用户需要确保老语法不要覆盖新语法，让浏览器同时支持。
.page-wrap {
display: -webkit-box; /* 2009版 - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* 2009版 - Firefox 19- (存在缺陷) */
display: -ms-flexbox; /* 2011版 - IE 10 */
display: -webkit-flex; /* 最新版 - Chrome */
display: flex; /* 最新版 - Opera 12.1, Firefox 20+ */
}
整个页面包含3列，设计一个20%、60%、20%网格布局。第一步，设置主内容区域宽度为60%；第2步设置侧边栏来填补剩余的空间。同样把新旧语法混在一起使用：
.main-content {
-webkit-box-ordinal-group: 2; /* 2009版 - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* 2009版 - Firefox 19- */
-ms-flex-order: 2; /* 2011版 - IE 10 */
-webkit-order: 2; /* 最新版 - Chrome */
order: 2; /* 最新版 - Opera 12.1, Firefox 20+ */
width: 60%; /* 不会自动伸缩,其他列将占据空间 */
-moz-box-flex: 1; /* 如果没有该声明, Firefox 19-将溢出h, 覆盖宽度 */
background: white;
}
在新语法中，没有必要给边栏设置宽度，因为他们同样会使用20%比例填充剩余的40%空间。但是，如果不显式设置宽度，在老的语法下会直接崩溃。
完成初步布局之后，需要重新排列的顺序。这里设计主内容排列在中间，但在源码之中，它是排列在第一的位置。使用Flexbox可以非常容易实现，但是用户需要把Flexbox几中不同的语法混在一起使用：
.main-content {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.main-nav {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.main-sidebar {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}