CSS3 建立弹性盒布局 Flex布局

弹性盒布局模型中引入了一些新的属性，只要设置好相应属性，盒子就具有弹性，在改变浏览器窗口大小时，盒子大小也会自动发生变化。并且，盒子的大小由浏览器自动计算，使页面布局更加灵活、更加简单，可以很轻松创建自适应浏览器窗口的流式布局。

如，在class = "father" 的父元素中，包含class = "box1"、class = "box2"、class = "box3"三个子元素。HTML代码如下（除非特殊声明，后文都将使用该实例）：

<div class = "father">
<div class = "box1">1</div>
<div class = "box2">2</div>
<div class = "box3">3</div>
</div>

要使用弹性布局盒模型，实现弹性布局的效果，只需要两步：第一步，开启弹性盒模型；第二步，设置子元素的空间分配比例。

开启弹性盒模型

是否开启弹性盒模型，由父元素（即弹性容器，下同）决定。要开启弹性盒模型，只需把父元素的 display 的属性值为 flex 或 inline-flex 即可。如：

.father {
width: 600px;
display: flex;
}

取值为 flex 时，弹性容器被渲染为块级元素，取值为 inline-flex时，弹性容器被渲染为行内元素。如果把一个浮动或绝对定位元素的 display 属性值设置为 inline-flex，则 display 属性的计算值是 flex。

设置子元素的空间分配比例

开启弹性布局盒模型后，所有弹性子元素共享父元素的空间，并按弹性盒进行布局。然后，通过子元素的 flex-grow 属性设置各自的空间分配比例。设置分配比例后，所有子元素根据各自所占用的份额来分配父元素的空间。如：

.box1 {
flex-grow: 2;
background: #7f3ffd;
}
.box2 {
flex-grow: 1;
background: #ef39d5;
}
.box3 {
flex-grow: 1;
background: #1bb9f1;
}

上述代码中，box1、box2、box3的 flex-grow 属性值分别是2、1、1，它们把父元素的空间分成了2 + 1 + 1 = 4份。其中，box1占2/4，box2占1/4，box3占1/4。父元素的总宽度是600px，box1分得600×(2/4) = 300px，box2分得600×(1/4) = 150px，box3分得600×(1/4) = 150px。运行结果如图 9‑12 所示：

图9-12 display:flex效果

如果父元素 father 为非固定宽度，则在浏览器窗口大小发生变化时，各个子元素的宽度就会随着按比例发生变化，便体现出弹性布局的优势。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。