这是我参与「第四届青训营 」笔记创作活动的的第6天
通过学习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默认值，轴线占满整个交叉轴。
