flex弹性盒

/** 
	    FlexBox
	    * 内容 : 弹性盒模型包括主轴 侧轴
	    * 伸缩容器的属性
	    * display           伸缩容器: 
	        flex            块级
	        inline-flex     内联 

	    * flex-direction        主轴方向: 
	        row             默认，从左到右 
	        row-reverse     从右向左
	        column          从上到下
	        column-reverse  从下到上

	    * flex-wrap         伸缩容器是单行还是多行 并控制侧轴的方向，侧轴的方向决定堆放的方向
	        nowrap(默认值) | wrap(多行显示) | wrap-reverse(多行显示-反方向 从下往上排列)            

	    * justify-content   伸缩项目在主轴上的对齐方式: 
	        flex-start      默认，向伸缩容器的起始位置对齐
	        flex-end        向伸缩容器的的终点位置对齐
	        centent         向伸缩容器的中间位置对齐
	        space-between   伸缩项目平均分布 第一个伸缩项目在伸缩容器中最开始位置 最后一个伸缩项目在伸缩容器中的终点位置
	        space-around    伸缩项目平均分布在伸缩容器里 两端保留一半的空间

	    * align-content     伸缩项目在侧轴上的对齐方式(多行模式)
	        flex-start      向伸缩容器的起始位置对齐
	        flex-end        向伸缩容器的结束位置对齐
	        center          向伸缩容器的中间位置对齐
	        space-between   在伸缩容器里平均分布
	        space-around    在伸缩容器里平均分布 两边各有一半空间
	        stretch         各行将会伸展占用剩余空间 会受max-... min-... 影响

	    * align-items       伸缩项目在侧轴上的对齐方式(对单行对齐进行控制)
	        flex-start      侧轴的起始位置
	        flex-end        侧轴的结束位置
	        center          侧轴中心位置
	        baseline        基线对齐
	        stretch         默认，如果没设置高度 伸缩项目默认填充整个容器 如果有max-height max-width等属性 会受到影响

	    * flex-grow         伸缩项目占用多少剩余空间(如果给一个元素设置了width又设置了flex-grow 剩余空间=总宽度-width)
	        number          占用空间比例 注:[给每个元素一个宽度 会让所有元素忽略内容长短带来的宽度影响 如果不给宽度 每
	                        个元素的宽是等于去掉内容以后的宽度]
	    
	    * 伸缩项目上的属性
	    * order             伸缩项目在文档流中出现的位置
	    * align-self        伸缩项目在侧轴上的对齐方式
	        flex-start      侧轴的起始位置
	        flex-end        侧轴的结束位置
	        center          侧轴的中心位置
	        baseline        基线对齐

	    实际值 = 计划值 - 总差值 * flex-shrink/(flex-shrink和)