伸缩盒子

在之前的布局中，如果采用浮动，则必须特别小心，一旦添加了外边距，很可能导致盒子掉下来。为了达成响应的排版，浮动要做很多设计，还要结合媒体查询进行很复杂的逻辑。

CSS3中引入了伸缩盒子布局，很好的解决了弹性排版的问题。先通过两个例子来看一下。

伸缩盒子简单使用

假如需要水平排布三个盒子，采取响应式的方法，即不设定固定的宽度，页面排布如下：

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>

采取传统的浮动方式如下：

section {
    width: 80%;
    height: 30%;
    margin: 0 auto;
}

div {
    width: 33.33%;
    height: 100%;
    box-sizing: border-box;
    border:1px solid black;
    float: left;
}

虽然排布了三个盒子，但是如果给第二个盒子加上左右边距，浮动就会掉下来，因为浮动不包括边距。下边改成CSS3伸缩盒子布局，再加上边距看一看：

section {
    width: 80%;
    height: 30%;
    margin: 0 auto;
    display: flex;
}

div {
    height: 100%;
    box-sizing: border-box;
    border:1px solid black;
    flex: 1;
}

div:nth-child(2){
    margin:0 10px;
}

增加的两句话是 display: flex; 和 flex: 1;，第一句话表示给父元素加上伸缩属性，这个父元素就变成了一个伸缩盒子。第二句话给子元素加上flex:1。而且可以注意的是，子元素都去掉了宽度的设置。

下边来简单的看一下伸缩盒子的使用方法：

1. 首先，让需要成为伸缩盒子的元素，加上 display:flex成为伸缩容器

   对于成为伸缩容器的元素，还有属性可以设置：

   • flex-direction  调整主轴的方向，参数可以是row（默认水平排列）和colunm（垂直排列）。还有row-reverse 和 column-reverse可以反向排布元素。

2. 其次，需要对其中的子元素设置flex属性。属性后边跟的数字表示份数，每个元素实际占的大小，由所有具备flex 属性的子元素相加起来算比例。

   子元素如果不加flex属性，表示不参与伸缩。但依然会按照顺序排布。

   添加了flex之后的元素，可以用min-width控制最小宽度，max-width控制最大宽度。

了解了上述之后，可以结合@media进行媒体查询，然后来修改伸缩盒子的属性，就可以实现更加方便的排布。网站经常使用移动端适配的一个典型的应用就是根据屏幕的宽度，在屏幕超过一定宽度的时候正常展示，而在屏幕小于一定宽度的时候，将页面元素按照上下显示，这其实就是通过媒体查询然后设置伸缩盒子内元素的宽度，以及整体是水平还是竖直放置来实现的。

伸缩盒子的具体属性和设置

伸缩盒子从出现这个概念到发布经历了几次变化，现在稳定下来了。之后的具体部分，在学到的时候再总结。

响应式网页的核心就是，除了特殊布局，不要给固定的宽度，用继承和伸缩盒子来控制宽度。给最小需要高度的单元高度，不要给其他元素高度。然后通过媒体查询控制伸缩盒子的排布方向和元素的比重。用纯CSS3写了一个响应式页面在这里。