9.6.1　使用自适应窗口的弹性盒布局

9.6.1　使用自适应窗口的弹性盒布局

在上节介绍的盒布局中，对左侧边栏、中间内容、右侧边栏的3个div元素的宽度都进行了设定，如果想让这3个div元素的总宽度随着浏览器窗口宽度的变化而变化，就需要使用box-flex属性，使盒布局变为弹性盒布局。针对Firefox浏览器，需要将其写为-mozbox-flex，针对Safari浏览器或者Chrome浏览器，需要将其写为-webkit-box-flex，IE浏览器不支持该属性。

在上一节中，将所有内容包围起来的id为wrapper的div元素中设置了box属性，实现了盒布局，但也因此整个页面内容无法保持居中。在上例的基础上，作一些调整，设置左、右侧边栏的宽度不变，中间内容的宽度随着浏览器窗口宽度的变化而变化，这3部分的宽度为浏览器窗口的80%，但最大不超过1 000 px。

为了实现这一要求，先使用id为container的div将wrapper包围起来。

设置作为网页元素容器的container的宽度及居中属性。宽度为浏览器窗口的80%，最大宽度max-width为1 000 px，上、下边距为0，左、右水平居中。代码如下：

然后在中间内容content的样式中，将原本的固定宽度width：380 px改为box-flex：1，设置其为弹性大小。其他div元素的样式不变。代码如下：

显示效果如图9-23、图9-24所示，在不同的浏览器宽度下中间内容的宽度也不同，但是网页总宽度不超过1 000 px。

图9-23　自适应宽度的弹性盒布局

图9-24　在不同宽度浏览器窗口中的显示