flex 布局是CSS3中新增加的一套布局方案，属于一维布局模型。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-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box { flex-flow: flex-direction || flex-wrap justify-contentjustify-content 属性可以用来定义子元素在主轴上的对齐方式。
相应的属性值如下:
flex-start: (默认)，左对齐flex-end: 右对齐center: 居中space-between: 两端对齐，子元素之间的间隔相等space-around: 子元素之间的间隔相等。两端间隔相等。align-itemsalign-items属性定义子元素在交叉轴上如何对齐。
该属性的属性值如下:
flex-start 交叉轴的起点对齐flex-end 交叉轴的终点对齐center 交叉轴的中点对齐baseline 子元素的第一行文字的基线对齐stretch(默认值) ，如果子元素未设置高度或者设为auto，将占满整个容器的高度。align-contentalign-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，则该属性不起作用。
该属性的属性值如下：
flex-start 与交叉轴的起点对齐flex-end 与交叉轴的终点对齐center 与交叉轴的中点对齐space-between 与交叉轴两端对齐，轴线之间的间隔平均分布space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch(默认值)，轴线占满整个交叉轴。flex子元素属性orderorder属性可以定义元素的排列顺序。元素的默认数值为0，一般来说，数值越小，排列越靠前。
.item { order: integer flex-growflex-grow属性定义项目的放大比例，默认为0。即使存在剩余空间，也不会放大。
.item { flex-grow: number /* default 0 */如果上述的四个子元素的flex-grow值都为1，那么四个子元素会平均分配剩余空间。
如果其中某个子元素的flex-grow属性为2，那么和其他三个分配剩余空间的比例关系就是2:1:1:1。
flex-shrinkflex-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-basisflex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间。浏览器会根据这个属性，来计算主轴的空间使用。默认值为auto。即为子元素本来的大小。
.item { flex-basis: length | auto; /* default auto */可以将其设为和width和height一样的大小，这样的话子元素将占据固定的空间。
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: 1flex-grow: 1;flex-shrink: 1;flex-basis: 0%;如果容器里面的主轴空间全部被子元素占据，那么某一个子元素的flex-basis值大于元素现在在主轴空间占据的最大宽度时，那么该子元素就会放大，相应的，其他的子元素就会缩小。
flex的值为两个值并且没有单位的时候:
flex: 1 2;flex-grow:1;flex-shrink: 2;flex-basis:0%;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-selfalign-self 属性允许单个子元素与其他项目采用不一样的对齐方式，可以覆盖flex容器属性中的align-items属性值。默认为auto，表示继承自父元素的align-items属性，如果没有父元素属性，则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;