display:flex相关属性

css弹性布局
display:flex相关属性：

容器属性：
	1.flex-direction:控制主轴是哪一根，控制主轴的方向。
		属性值：
			row:				主轴是从左往右的x轴.
		   	row-reverse:		主轴是从右往左的x轴.
		   	column:				主轴是从上往下的y轴.
		   	column-reverse:		主轴是从下往上的y轴.
		   	
	2.富裕空间管理：只决定富裕空间的位置，不会给项目分配空间。
		（1）justify-content:管理主轴富裕空间。
				属性值：
					flex-start:			富裕空间在主轴的正方向.
					flex-end:			富裕空间在主轴的反方向.
					center:				富裕空间在主轴两边.
					space-between:		富裕空间在每个项目之间.
					space-around: 	  	富裕空间在项目两边和项目之间.
		（2）align-items:管理侧轴富裕空间。
				属性值：
					flex-start:			富裕空间在侧轴的正方向.
					flex-end:			富裕空间在侧轴的反方向.
					center:				富裕空间在侧轴两边.
					baseline:			项目基线对齐.
					stretch:			等高布局（项目没有高度）.
					
	3.flex-wrap:控制的是侧轴的方向（项目总长度大于容器长度的时候，项目的宽度会自行收缩不换行，flex-wrap可以设置他进行换行以及侧轴方向）。
		属性值：
			nowrap:			不换行.
			wrap:			侧轴方向由上而下（flex-shrink失效）.
			wrap-reverse:	侧轴方向由下而上（flex-shrink失效）.
		侧轴富裕空间的管理：
			单行单列（不换行）时：
					align-content无效.
			多行多列（换行）时：
					align-items无效.
		注意：align-self 优先级高最高。
			
	4.align-content:多行/列时侧轴富裕空间的管理（把多行/列看成一个整体）。
		属性值：
			flex-start:			富裕空间在侧轴的正方向.
			flex-end:			富裕空间在主侧轴的反方向.
			center:				富裕空间在侧轴两边.
			space-between:		富裕空间在每个项目之间.
			space-around: 	  	富裕空间在项目两边和项目之间.
			注意：要设置flex-wrap换行（属性值不为nowrap），align-content的效果才会生效。
			
	5.flex-flow:flex-direction和flex-wrap的简写属性（本质上控制了主轴和侧轴分别是哪一根，以及它们的方向）。
		属性值：
			参数1（flex-direction）：
				row:				主轴是从左往右的x轴.
		   		row-reverse:		主轴是从右往左的x轴.
		   		column:				主轴是从上往下的y轴.
		   		column-reverse:		主轴是从下往上的y轴.
			参数2（flex-wrap）：
				nowrap:			不换行.
				wrap:			侧轴方向由上而下（flex-shrink失效）.
				wrap-reverse:	侧轴方向由下而上（flex-shrink失效）.

项目属性：
	1.order:控制项目的排列顺序（默认值为0）。
		属性值：number.
		注意：如果几个项目的order值相等，则根据元素先后顺序依次排列。
		
	2.align-self:项目自身侧轴富裕空间的管理。
		属性值：
			flex-start:			富裕空间在侧轴的正方向.
			flex-end:			富裕空间在侧轴的反方向.
			center:				富裕空间在侧轴两边.
			baseline:			项目与容器基线对齐.
			stretch:			项目与容器等高布局（项目没有高度）.
			
	3.flex-basis:伸缩规则计算的基准值（默认值auto，拿width或height的值）。
	
	4.flex-grow:弹性空间管理（弹性因子，默认值为0）。
		属性值：number.
		注意：容器大小大于项目大小总和时该属性才生效。
		计算规则：
			（1）可用空间 = （容器大小 - 所有相邻项目flex-basis的总和）。
				var a = 容器大小 - flex-basis和.
			（2）可扩展空间 = （可用空间 / 所有相邻项目flex-grow的总和）。
				var b = a / flex-grow和.
			（3）每项扩展空间的计算 = （可扩展空间 * 每项flex-grow值）。
				var c = b * flex-grow.
			（4）每项伸缩后大小 = （伸缩基准值flex-basis + 每项扩展空间）。
				var d = flex-basis + c.
				
	5.flex-shrink:收缩因子（默认值为1）。
		属性值：number.
		注意：容器大小小于项目大小总和时该属性才生效，并且元素不能换行，否则没有效果。
		计算规则：
			（1）计算收缩因子与基准值乘的总和：
				var a = 每一项flex-shrink * flex-basis之和.
			（2）计算收缩因数：收缩因数 =（项目的收缩因子 * 项目基准值）/ 第一步计算总和：
				var b = (flex-shrink * flex-basis)/a.
			（3）每项移除空间的计算：移除空间 = 项目收缩因数 x 溢出的空间（容器大小-项目大小总和） 
				var c =	b * 溢出的空间.
			（4）每项伸缩后大小的计算：每项伸缩后大小 = 项目大小 - 移除空间。
				var d = flex-basis - c.