弹性盒子是CSS3的一种新布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
内容：
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器，弹性容器内的子元素会变成行块元素（具有包裹性，宽度、高度、margin、padding值可设置，子元素一行排列）。
兼容性：
移动端：< Android4.3 、< ios8
pc端浏览器：
常用属性：
| 属性 | 描述 | 常用属性值 |
|---|---|---|
| display | 指定 HTML 元素盒子类型。 | flex、inline-flex |
| flex-direction | 指定了弹性容器中子元素的排列方式。 | row 、row-reverse 、 column 、 column-reverse |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。 | flex-start 、 flex-end 、 center 、 space-between 、space-around |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 | stretch、flex-start 、 flex-end 、center |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 | nowrap、wrap、wrap-reverse |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 | stretch、 flex-start 、flex-end 、 center |
| flex-grow | 默认值为0，空白如何瓜分，默认不瓜分，值越大瓜分越多，值不为0，元素本身的宽度加上其瓜分到的空白就是此元素的宽度。 | |
| flex-shrink | 默认值为1，设置子元素如何缩小自身空间，值为0时不缩小。 | |
| flex-basis | 默认为auto，设置子元素的宽度，如果设置了width，width值会被取代。 |
弹性盒子摆筛子练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 8px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
.flex-item {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="box flex-container">
<div class="flex-item"></div>
</div>
</body>
</html>
2.
弹性盒子轻松实现页面导航布局：
