1. Flex布局简介
Flex布局又叫弹性布局，设计思想是应用于响应式布局开发。
兼容性为IE9以上。
2. Flex布局
2.1. 应用于元素
display: flex 应用于元素
display: inline-flex 应用于行内元素
display: -webkit-flex 兼容safari
被应用flex的元素叫做container（容器）
flex container的子元素叫做item（项目）
2.2. Flex布局概念
被应用Flex的container，其items会自动布局。布局方式参照container的flex属性。
2.3. flex-direction
axis是flex container的x轴和y轴
horizon axis 水平轴
vertical axis 垂直轴
container有main axis（主轴）的概念，我们可以在
x+ x- y+ y- 两条轴4个方向上选出任意一条当做main axis。
container的items会自动沿着main axis进行排布。
默认的main axis是x+轴，即从左到右的水平轴。
和main axis垂直的叫做cross axis，(垂直轴)
flex-direction
选择哪一根是main axis
flex-direction:row x+
flex-direction:row-reverse x-
flex-direction:column y-
flex-direction:column-reverse y+
2.3. flex-wrap
flex-direction控制了flex container的items是延那个axis排列，但是没有控制起始行。
flex-wrap就是控制了items的排列起始行。
比如8*8的container，里面放几个items。main axis选择x+。我们知道了items从左到右排列。
同时也必须知道这些items是在 (1,1) (2,1) (3,1) ……这样排列还是（1,-8）（2，-8）（3，-8）这样排列。
flex-wrap
flex-wrap: wrap
flex-wrap: nowrap 不换行 （默认）
flex-wrap: wrap-reverse
如果main axis是x+ 或者x- 那么flex:wrap默认就是y-，即从上到下。同时flex:wrap-reverse就是从下到上
如果main axis是y+ 或者y- 那么flex:wrap默认就是x+，即从左到右。同时flex:wrap-reverse就是从右到左
2.4. flex-flow
flex-flow是flex-direction和flex-wrap的简写形式
flex-flow:
小结一下
到现在我们知道了什么？
如果有一个4*4弹性的盒子，我们慢慢往盒子里加小盒子，大盒子会控制小盒子的增加位置。
比如从左到右一个个加，如果换行了是新行在下方还是上方等等。
我们继续思考这些问题
默认情况下，当我们加到2个盒子的时候，小盒子的摆放位置应该是这样的
□ □ × ×
× × × ×
× × × ×
在不改变小盒子顺序的情况下，如何改成这样？
× × □ □
× × × ×
× × × ×
默认情况下，当我们加到6个盒子的时候，小盒子的摆放位置应该是这样的
□ □ □ □
□ □ × ×
× × × ×
在不改变这6个小盒子样式的情况下，怎么让这6个小盒子全部下移一行？（对齐到底边）
× × × ×
□ □ □ □
□ □ × ×
这就要引入对齐方式了。
2.5. justify-content
知道了items从哪一行开始，就想excel一样，每一个单元格，我们还可以控制里面文字的对齐方式，比如贴在左边或者居中。
justify-content
justify-content:flex-start 对齐于这一行的起始
justify-content:flex-end 对齐于这一行的结尾
justify-content:center 居中对齐
justify-content:space-between 行首行末贴紧container，其他items间隔相同
justify-content:space-around items间隔相同，行首行末和container的间隔等于items的间隔一半
2.6. align-items
align-items:flex-start 整体对齐于第一行
align-items:flex-end 整体对齐于最后一行
align-items:center 行间距相同，第一行和container的间隔等于最后一行和container的间隔，也等于行间距的一半
align-items:stretch 如果items没有设置宽高，那么会被在行上被拉伸
align-items:base-line 整体对齐于每个items第一行文字
2.7. align-content
仅限于有多行的情况下生效。
align-content:flex-start 行距为0后，整体对齐于第一行
align-content:flex-end 行距为0后，整体对齐于最后一行
align-content:center 行距为0后，整体对齐于中间线
align-content:space-between 首行紧贴container，尾行紧贴container，其他行间隔相同
align-content:space-around 行间隔相同，首行和末行和container的间隔等于行间隔的一半
2.8. flex
flex是items的属性！！！
这是一个合并属性原始属性是
flex-grow 0:空间足够不会自动拉伸 1：空间足够会自动拉伸
flex-shrink 0:空间不够不会自动压缩 1：空间不够会自动压缩
flex-basis auto：自动判断main axis是否够空间 其他值：根据这个值判断main axis是否够空间`