Flex布局
通过学习 CSS 的基础知识学会了如何设置文本的样式，以及如何设置和操作内容所在的框。但如何把盒子放在正确的位置上还需要深入了解 CSS，学习 CSS 布局的相关内容。CSS 布局种类较多，本文将主要介绍 Flex 布局。
什么是布局(Layout)?
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
盒子模型
CSS 盒子模型(Box Model)本质上是一个盒子，封装周围的 HTML 元素，它包括：边距(margin)，边框(border)，填充(padding)，和实际内容(content)。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面是盒子模型的示意图：
属性介绍：
- width 指定 content box 宽度
- height 指定 content box 高度
- padding 指定元素四个方向的内边距
- border 指定容器边框样式、粗细和颜色
- margin 指定元素四个方向的外边距
flex 布局
Flex 是 Flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
使用 Flex 布局需要在display属性中进行声明。
.container {
display: flex;
}
Flex 容器默认存在两根轴：主轴和侧轴。主轴从左到右，侧轴从上到下。
Flex 容器主要有以下 6 个属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction 属性
flex-direction属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向，有row、row-reverse、column和column-reverse四种取值。
下面给出 flex 布局的示例。外层div使用 flex 布局，且flex-direction的值为column，A、B、C 三个div从上到下排列。
flex-wrap 属性
flex-wrap属性指定 flex 元素单行显示还是多行显示，有三个可能取值。
nowrap不换行。wrap换行，第一行在上方。wrap-reverse换行，第一行在下方。
flex-flow 属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content 属性
justify-content属性定义了项目在主轴上的对齐方式。
align-items 属性
align-items属性定义项目在侧轴上的对齐方式。
align-content 属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content属性有 6 个可能取值。
flex-start与侧轴的起点对齐。flex-end与侧轴的终点对齐。center与侧轴的中点对齐。space-between与侧轴两端对齐，轴线之间的间隔平均分布。space-around每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch默认值，轴线占满整个交叉轴。