flex布局详解
说明
flex 布局是CSS3中新增加的一套布局方案，属于一维布局模型。flex提供了强大的空间分布和对齐能力。
想要理解和使用flex进行网页布局，需要先来学习和理解下面的几个概念：
flex的两根轴线: 主轴和交叉轴
flex容器和flex子元素
基本概念的解释
flex的两根轴线
当使用flex进行布局的时候，首先需要了解的，就是flex的两根轴线：主轴和交叉轴。
为什么一定要理解这两个轴线呢，因为所有的flex属性都和这两根轴线有关系。
一般来说，元素在容器内部排列的顺序都是按照从左向右的顺序来进行排列的，而在flex中，决定元素排列的是主轴。
默认情况下flex中主轴上的元素排列方式和非flex情况下是一样的。
flex的特性，就是元素沿着主轴或者交叉轴进行排列。
flex容器和flex子元素
想要使用flex布局方案，需要在容器属性上使用display:flex或者display:inline-flex。
而一旦设置了任意一个属性，那么这个标签就变成了flex容器，也可以称之为是弹性容器。
而相对应的，容器当中的子元素就变成了flex子元素也就是弹性子元素。
flex 的相应属性分类
想要更高的学习和使用flex布局，需要了解flex中包含的属性。一般来说，flex的属性可以分成两类:
flex容器属性(flex-container)
flex子元素属性(flex-item)
所谓的flex容器属性就是将属性设置在flex容器上，而flex子元素则是将属性设置在子元素的身上。
flex容器属性
flex-direction
通过flex-direction属性，可以设置主轴的方向，它包括下面的几个值:
row(默认值): 主轴为水平方向，项目排列起点在左端。
row-reverse: 主轴为水平方向，起点在右端。
column: 主轴为垂直方向，起点在上沿。
column-reverse: 主轴为垂直方向，起点在下沿。
实际的效果：
flex-wrap
默认情况下，flex子元素全部排列在主轴线上，如果容器的宽度无法完全放置flex子元素，那么子元素就会自动进行收缩。如果不希望子元素在容器宽度不够时收缩，就可以通过flex-wrap来让元素自动换行。
该属性的属性值如下:
nowrap:(默认)，不发生换行。
wrap: 换行，第一行在上方。
wrap-reverse: 换行，第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content
justify-content 属性可以用来定义子元素在主轴上的对齐方式。
相应的属性值如下:
flex-start: (默认)，左对齐
flex-end: 右对齐
center: 居中
space-between: 两端对齐，子元素之间的间隔相等
space-around: 子元素之间的间隔相等。两端间隔相等。
align-items
align-items属性定义子元素在交叉轴上如何对齐。
该属性的属性值如下:
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 子元素的第一行文字的基线对齐
stretch(默认值) ，如果子元素未设置高度或者设为auto，将占满整个容器的高度。
align-content
align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用。
该属性的属性值如下：
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值)，轴线占满整个交叉轴。
flex子元素属性
order
order属性可以定义元素的排列顺序。元素的默认数值为0，一般来说，数值越小，排列越靠前。
.item {
order: <integer>;
}
flex-grow
flex-grow属性定义项目的放大比例，默认为0。即使存在剩余空间，也不会放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果上述的四个子元素的flex-grow值都为1，那么四个子元素会平均分配剩余空间。
如果其中某个子元素的flex-grow属性为2，那么和其他三个分配剩余空间的比例关系就是2:1:1:1。
flex-shrink
flex-shrink属性定义了元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有的子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个子元素的flex-shrink属性为0，当空间不足时，这个子元素不会缩小。
负值对该属性无效。
flex-shrink缩小值计算方式
假设: 父元素宽度400px。 item1的宽度是200px，item2的宽度是300px，此时对于父元素来说，两个子元素的和共溢出100px。如果此时两个item的flex-shrink的值都为0，那么多于的100px的值就会发生溢出。
如果此时item1的值设置为flex-shrink为0。那么item1将不会减小，但是item2会减少。最终item2的大小为: item2 width[300] – 溢出的宽度 [200 + 300 – 400] = 200。
如果item1和item2都发生减少操作，例如item1的flex-shrink的值为3，item2的flex-shrink值为2。
那么最终item1的宽度为: item1宽度[200px] – item1 减少的宽度。
item1 减少的宽度 = 溢出的宽度 * ( item1 宽度 * item1 的flex-shrink / (item1 宽度 * item1的 flex-shrink + item2 宽度 * item2的 flex-shrink ) )
上面的内容全部转为为数值： 100 * (200*3/(200 * 3 + 300 * 2)) = 50。
此时经过计算最终item1的宽度为200-50=150px。
通过相同的计算，item2的宽度为: 300-50=250px。
flex-basis
flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间。浏览器会根据这个属性，来计算主轴的空间使用。默认值为auto。即为子元素本来的大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
可以将其设为和width和height一样的大小，这样的话子元素将占据固定的空间。
flex
flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
常用情况:
flex等于数值的情况如下:
flex: 1
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
flex: 2
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;
flex: n
flex-grow: n;
flex-shrink: 1;
flex-basis: 0%;
flex等于带有单位的值情况如下：
flex: 100px
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
flex: 200px
flex-grow:1;
flex-shrink: 1;
flex-basis: 200px;
flex: length
flex-grow:1;
flex-shrink:1;
flex-basis: length;
如果容器里面的主轴空间全部被子元素占据，那么某一个子元素的flex-basis值大于元素现在在主轴空间占据的最大宽度时，那么该子元素就会放大，相应的，其他的子元素就会缩小。
flex的值为两个值并且没有单位的时候:
flex: 1 2;
flex-grow:1;
flex-shrink: 2;
flex-basis:0%;
flex: 2 3;
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
flex: num1 num2;
flex-grow: num1;
flex-shrink: num2;
flex-basis: 0%;
flex的值为两个值并且第二个值具有单位的时候:
flex: 1 200px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
flex: 2 200px;
flex-grow: 2;
flex-shrink: 1;
flex-basis: 200px;
flex: num length;
flex-grow: num;
flex-shrink: 1;
flex-basis: length;
flex的值为三个值的时候，分别为flex-grow、flex-shrink、flex-basis。
flex的值为none的时候，flex-grow的值为0，flex-shrink的值为0，flex-basis的值为auto。
flex的值为auto的时候，flex-grow的值为1，flex-shrink的值为1，flex-basis的值为auto。
align-self
align-self 属性允许单个子元素与其他项目采用不一样的对齐方式，可以覆盖flex容器属性中的align-items属性值。默认为auto，表示继承自父元素的align-items属性，如果没有父元素属性，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
