Flex 布局（参考阮一峰链接：ruanyifeng.com/blog/2015/0…
概念：
flex为（flexible box）的缩写，为弹性布局。用来为盒模型提供最大的灵活性。
基本概念
1. 采用flex布局的元素称为flex容器，简称容器，他的所有子元素自动成为容器成员，称为flex项目，简称项目 2. 容器内部存在两条轴线，水平的叫做主轴，垂直方向的为交叉轴，项目默认沿主轴排列，单个项目在主轴占据的空间叫做主轴空间，占据交叉轴的空间叫做交叉轴空间。
容器的属性（6个）
1. flex-diration（控制排列方向）：（取值有4个 row（默认）row-reverse column column-reverse）
- row： 水平排列，从左边开始，
- row-reveser: 水平排列，从右边开始，
- column: 垂直排列，从上到下
- column-reveser: 垂直排列，从下到上。
2 flex-wrap（控制换行）：warp，nowarp，warp-reveser
1 warp: 换行
2 nowarp（超出不换行，会挤压空间）
3 warp-reveser: 换行，第一行排在下方。
3 flex-grow： flex-diration和flex-warp的简写 默认值是row nowarp
4 justify-content: 定义了项目在主轴上的排列方式，有五个取值(flex-start(默认), flex-end, center, space-between, space-around)
- flex-start: 左对齐，
- flex-end: 右对齐，
- center: 居中对齐，
- space-between: 两端对齐，项目之间的间隔都相等，
- space-around： 每个项目的两侧都相等，所以项目之间的间隔比项目与边框的间隔大一倍。
5 align-items(定义项目如何在交叉轴上对齐-5个取值)：flex-start，flex-end, center,baseline，stretch（默认值）
- flex-start: 交叉轴的起点对齐，
- flex-end: 交叉轴的终点对齐，
- center: 交叉轴的中点对齐，
- stretch： 如果项目未设置高度，或者设置为auto，项目将占满容器的高度
- baseline: 项目第一行的文字基线对齐。
6 align-content(定义了多跟轴线的对齐方式-6个值）: flex-start,flex-end,center,space-between,space-around, stretch(默认)
- flex-start: 与交叉轴起点对齐，
- flex-end: 与交叉轴终点对齐，
- center: 与交叉轴的中点对齐，
- space-between: 与交叉轴的两端对齐，轴线之间的间隔平均分布，
- space-around： 每一根轴线的两侧都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍
项目的属性（6个）： order，flex-grow，flex-shrink， flex-basis，flex， align-self
1 order: 定义项目的排列顺序，值越小，排的越靠前，默认为0。
2 flex-grow： 定义项目的放大比例，默认为0， 即如果存在剩余空间也不放大。
如果所有的项目flex-grow属性都为1，如果存在剩余空间，则他们将等分剩余空间。如果一个的flex-grow的属性为2 其他的为1，则属性为2的项目所占的剩余空间是flex-grow属性为1的项目多占一倍。
3 flex-shrink： 定义了项目的缩小比例，默认为1，即如果空间不足，则默认缩小。
如果所有的项目flex-shrink的属性都为1时，若项目空间不足时，他们都将等比缩小，如果一个项目的flex-shrink的为0，其他项目的flex-shrink都为1时，若项目空间不足时，flex-shrink为0的不缩小。
4 flex-basis： 定义了项目在分配项目之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余的空间，他的默认值为auto，即项目的本来大小。
5 flex： 是flex-grow，flex-shrink， flex-basis的缩写。默认值为： 0 1 auto，
flex：1 （1 1 0） flex： auto （1 1 auto） flex：none （0 0 auto）
6 align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，stretch。取值有6个：auto(默认），flex-start，flex-end，center，baseline，stresch
