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: <flex-direction> || <flex-wrap>

小结一下

到现在我们知道了什么？

如果有一个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是否够空间`