# CSS3教程 - 15 弹性盒模型
前面学习了浮动、定位的方式来帮助我们布局，下面来学习 CSS3 中一个新的布局方式：弹性盒。浮动的定位方式有很多的副作用，而弹性盒可以替代浮动。
CSS 中的弹性盒（Flexbox）是一个非常强大且灵活的布局模型，可以提供更简单的方式来设计和排列页面元素，尤其是处理复杂的布局时。尤其是在移动端，每个手机的宽度都不同，通过弹性盒，可以使得子元素在父容器中能够按需自动分配空间并对齐，并使元素具有”弹性“，可以根据页面大小的改变而改变。
# 15.1 基本概念
弹性盒布局基于父容器和子元素的关系。父容器被称为 弹性容器（flex container），而容器中的每个直接子元素称为 弹性元素（弹性项）（flex item）。
我们首先需要给父容器设置 display: flex 或 display: inline-flex 属性，将父元素变为弹性容器，这样就能够启用弹性布局。
display: flex：将父元素设置为块级弹性容器；display: inline-flex：将父元素设置为行内弹性容器；
父元素设置为弹性容器，它的子元素（直接后代元素）就变成了弹性元素，弹性元素会变为块元素，即使是行内元素也会变成块元素。
display: inline-flex; 用的比较少，因为如果想让弹性容器和弹性容器之间像块元素一样横向排列，外面再套一个弹性容器就好了，一个元素可以同时是弹性容器和弹性元素。
举个栗子：
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
width: 600px;
border: 5px solid red;
display: flex; /* 设置父元素为块级弹性容器 */
}
.outer div {
width: 100px;
height: 100px;
}
.box1 {
background-color: lightblue;
}
.box2 {
background-color: lightpink;
}
.box3 {
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="outer">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
- 在上面的代码中，父容器中包含了三个子容器，然后通过
display: flex;设置父容器为块级弹性容器。 - 子元素变为水平排列了。
显示如下：
# 15.2 弹性容器的属性
下面来介绍一下弹性容器相关的属性。
内容未完......