基本概念
1.容器—有容器属性(container)
2.项目—有项目属性(items)
FlexBox（弹性盒布局）
一种可控制子级盒子，对其进行集体操作的一种排版方式，比起常规流来讲操作更为便捷。
要使用弹性盒，必须先将一个元素设置为弹性容器 （父盒子）通过display设置弹性容器
display: flex;
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
可以控制子级盒子的：
- 摆放的流向
- 摆放的顺序
- 盒子的宽度、高度
- 水平垂直方向的对齐
- 是否允许折行
具体容器属性
| 属性 | 功能 |
|---|---|
| flex-direction | 设置主轴方向 |
| justify-content | 设置主轴子元素排列方式 |
| flex-wrap | 设置子元素是否换行 |
| align-content | 设置侧轴上子元素的排列方式（多行） |
| align-items | 设置侧轴上子元素的排列方式（单行） |
| flex-flow | 复合属性，相当于设置了 flex-direction 和 flex-wrap |
1、容器属性
1、flex-direction
| 属性值 | 含义 |
|---|---|
| row | 默认值，主轴为水平方向（水平布局），从左向右排列 |
| row-reverse | 主轴为水平方向（水平布局），从右向左排列 |
| column | 主轴为垂直方向（垂直布局），从上往下排列 |
| column-reverse | 主轴为垂直方向（垂直布局），从下往上排列 |
2、justify-content
| 属性值 | 含义 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 项目之间的间隔相等 |
| space-around | 项目之间的间隔相等，每个项目两侧的间隔相等 |
space-between与space-around的区别在于space-between第一和最后一个盒子是紧贴着父元素的，而space-around会分配间隔。
3、flex-wrap
| 属性值 | 含义 |
|---|---|
| nowrap | 默认值，表示不换行 |
| wrap | 换行，第一行在上方 |
| wrap-reverse | 换行，第一行在下方 |
flex-wrap属性默认值为nowrap，当窗体的宽度被拉到最小时，几个div不会换行，而是缩小自己的宽度适应窗口的宽度
4、align-content
| 属性值 | 含义 |
|---|---|
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 |
| stretch | 默认值，轴线占满整个交叉轴 |
5、align-items
| 属性值 | 含义 |
|---|---|
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline: | 项目的第一行文字的基线对齐 |
| stretch（默认值） | 如果项目未设置高度或设为auto，将占满整个容器的高度 |
6、flex-flow
flex-flow属性可以取两个值，分别是flex-direction和flex-wrap
.container {
flex-flow: row wrap;
}
2、项目属性
order：项目的排列顺序，数字越小排列越靠前，默认为0。
align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
flex-grow:定义弹性盒子项的拉伸因子，默认值0。即空间多余时盒子大小如何分配（所占比例）。
flex-shrink:指定了 flex 元素的收缩规则，默认值是 1。空间不够时，盒子大小如何压缩（所占比例）。
flex-basis:指定了 flex 元素在主轴方向上的初始大小。即没有收缩和拉伸的基础长度。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto。
