07_flex布局总结

flex frog练习

http://flexboxfroggy.com/

postcss可以处理新版本flex兼容老版本flex

flex简介

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，
使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行/列。
对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，
flex容器的边缘也不会与其内容的边缘折叠。

弹性盒模型，分老版与新版
老版本的我们通常称之为box（-webkit-box）
新版本的我们通常称之为flex（-webkit-flex / flex）

flex基础点

* 什么是容器?
		采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。

* 什么是项目?
		容器所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

* 什么是主轴?什么是侧轴？
		主轴与侧轴由flex-direction/-webkit-box-orient确定。
		容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
		项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
	
* 什么是富裕空间？（剩余空间）
		容器包含着项目，如果容器盒模型大于项目的盒模型总和，
		将有空白空间出现，将空白空间命名为‘富裕空间’，也叫‘剩余空间’。
		
		富裕空间分为 主轴的富裕空间 和 侧轴的富裕空间
		
		富裕空间的管理只决定富裕空间的位置，不会给项目分配空间。
		即富裕空间管理不会影响项目盒模型的大小。
		
		弹性空间管理是将 主轴上的富裕空间 按比例分配到项目上。（不涉及侧轴富裕空间）
	
		
---项目永远排列在主轴的正方向上
		
---flex分新旧两个版本
		-webkit-box
		-webkit-flex / flex

注意点

---我们都知道新版本的flex要比老版本的flex强大很多，有没有必要学习老版本的flex？
			移动端开发者必须要关注老版本的flex
			因为很多移动端设备内核低只老版本的flex

---老版本的box通过两个属性四个属性值控制了主轴的位置和方向		
	 新版本的flex通过一个属性四个属性值控制了主轴的位置和方向

老版本flex布局总结

声明老版本弹性盒子模型 display: -webkit-box;

// 老版本的box通过两个属性四个属性值控制了主轴的位置和方向	
-webkit-box-orient 确定主轴 
		确定了主轴，侧轴也就被确定了
		horizontal(x轴) / vertical（y轴）
		orient  ['ɔːrɪənt]  vt. 使适应；
-webkit-box-direction 确定主轴方向
		normal / reverse（css坐标系方向：x轴右为正方向，y轴下为正方向）
			// reverse [rɪ'vɜːs] n. 背面；相反；倒退；失败
		注：在flex老版本中，如果项目超出容器会默认溢出不换行，
				如果需要换行需要两个容器。
		
-webkit-box-pack 分配主轴富裕空间
		只决定富裕空间的位置，不会给项目分配空间
		注： 老版本富裕空间不是在主轴正方向上，而是固定的，需要和新版本区别开
		start：在主轴右边/下边
		end:	在主轴左边/上边
		center：在项目两边（水平/垂直居中）
		justify：在项目之间
		
-webkit-box-algin 分配侧轴富裕空间
		start：在侧轴下边/右边
		end：  在侧轴上边/左边
		center：在项目两边（居中）
		
-webkit-box-flex 弹性空间管理
		弹性因子（默认值为0）将富裕空间按比例分配到项目上
		既能控制拉伸，也可以控制收缩。

老版本flex布局总结：
	* 声明display为老版本的弹性盒模型 display: -webkit-box;
	// 以下属性需要加-webkit-box-前缀
	* 通过orient控制主轴和侧轴，通过direction确定主轴正方向；
			// -webkit-box-orient：horizontal(x轴) / vertical（y轴）
			// -webkit-box-direction：normal / reverse
	* 通过pack管理主轴的富裕空间，通过algin管理侧轴的富裕空间
			富裕空间管理不会改变项目盒模型的大小
			// -webkit-box-pack：start/end/center/justify
			// -webkit-box-algin：start/end/center
			css坐标系方向：x轴右为正方向，y轴下为正方向
			值start富裕空间在css坐标系正方向（需要和新版本flex布局区分）
			值end富裕空间在css坐标系反方向（需要和新版本flex布局区分）
			值center富裕空间在项目两边（居中）
			值justify主轴富裕空间在项目之间，侧轴没有此值
	* 通过flex进行弹性空间管理（将主轴富裕空间按比例分配到项目上）
			弹性空间管理会改变项目盒模型的大小
			// -webkit-box-flex：length值（默认值为0）

老版本flex API说明

// html
<div id="wrap">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
</div>

// css
*{
	margin: 0;
	padding: 0;
}
#wrap{
	width: 600px;
	height: 300px;
	border: 1px solid red;
	display: -webkit-box; /* 1.声明老版本弹性盒子模型 */
	
	-webkit-box-orient: horizontal;  /* 2.确定主轴 */
			/* 
			-webkit-box-orient: horizontal(主轴是x轴) / vertical（主轴是y轴）;
			 */
			 
	-webkit-box-direction: reverse;/*3. 确定主轴方向（容器布局方向）*/
			/* 
			-webkit-box-direction：normal（与css坐标系方向相同）/ reverse（与css坐标系方向相反）
			css坐标系方向：x轴右为正方向，y轴下为正方向
			 */
	
	/*富裕空间管理不会改变项目盒模型的大小，只会影响项目的位置*/		 
	-webkit-box-pack: center;/* 3.分配主轴富裕空间 */
			 /*
		 	-webkit-box-pack：start / end / center /  justify
		 	说明：
		 	start（富裕空间在css坐标系正方向，右/下，需要和新版本flex布局区分）
			end（富裕空间在css坐标系反方向，左/上，需要和新版本flex布局区分）
		    center富裕空间在项目两边（居中）
		    justify主轴富裕空间在项目之间，两端的项目紧贴容器，侧轴没有此值
			*/
			
	-webkit-box-align: end;/*4.分配侧轴富裕空间*/
			/* 
			-webkit-box-align：start / end / center
			 说明：
			 start（富裕空间在css坐标系正方向，右/下，需要和新版本flex布局区分）
			 end（富裕空间在css坐标系反方向，左/上，需要和新版本flex布局区分）
			 center富裕空间在项目两边（居中）
			 */
	
}
.item{
	width: 50px;
	height: 50px;
	background: pink;
	text-align: center;
	border: 1px solid; 
	box-sizing: border-box;
}
.item:nth-child(1){
	-webkit-box-flex: 1;/*5.弹性空间的管理，会影响项目盒模型的大小*/
		/* 
		-webkit-box-flex: 1;   弹性因子，默认值为0
		说明：
		此时主轴是x轴，项目横向排列在容器内，所以取宽度值；
		容器宽度为600px,单个项目宽度为50，共4个项目，所以富裕空间为600-50*4=400px;
		第一个项目弹性因子为1，其他项目弹性因子为0,4个项目弹性因子和为1；
		将富裕空间分为1（所有项目弹性因子的和）份400/1=400px(将此值命名为length1)；
		单个项目的宽度=单个项目的宽度+弹性因子*length1
		即4个项目盒模型宽度为450,50,50,50
		-webkit-box-flex主要控制单行/单列项目在主轴上如何伸缩以便填充满容器
		 */
}

新版本flex布局总结

声明新版本弹性盒子模型 display: flex; / display: -webkit-flex;

// 新版本的flex通过一个属性四个属性值控制了主轴的位置和方向
flex-direction 确定主轴及主轴方向
		row 从左往右的x轴	; 
		row-reverse 从右往左的x轴;
		column 从上往下的y轴;
			// column  ['kɒləm]  n. 纵队，列；专栏；圆柱，柱形物
		column-reverse从下往上的y轴
		
justify-content 分配主轴富裕空间
	只决定富裕空间的位置，不会给项目区分配空间
		flex-start：在主轴的正方向
		flex-end:	在主轴的反方向
		center：在项目两边（项目居中）
		space-between：在项目之间(项目紧挨着包裹器)
		space-around：在项目两边(主轴是x轴时，项目左右都有空间)
		
align-items 分配侧轴富裕空间
		单行单列时侧轴富裕空间看align-items 
		多行多列时侧轴富裕空间看align-content
		flex-start：在侧轴的正方向
		flex-end：  在侧轴的反方向
		center：		在两边
		baseline    基线对齐
		stretch		等高布局（项目没有高度）
		
flex-grow 弹性空间管理（将主轴富裕空间按比例分配到项目上）初始值为0
		弹性空间管理会改变项目盒模型的大小
		此属性会被flex-basis（指定了 flex 元素在主轴方向上的初始大小）影响，
		拉伸因子 如果没设定flex-basis，默认取项目自身weidth/height
		

新版本flex布局新增：
//容器新增属性：
flex-wrap: 控制的是侧轴的方向（控制侧轴堆砌方式）默认值为nowrap
	在flex老版本中，如果项目超出容器会默认溢出不换行，所以老版本没这个属性。
	在flex新版本中,如果项目超出容器会默认填充满容器，项目实际盒模型会比设定的要小。	
		nowrap 不换行(项目被压缩挤在一行)
		wrap   侧轴方向由上而下，默认中间有间隙 （flex-shrink失效）
		wrap-reverse 侧轴方向由下而上，默认中间有间隙（flex-shrink失效）
align-content：多行/列时 侧轴 富裕空间的管理（把多行/列看成一个整体）
		默认值：stretch（默认行与行之间有间隙）
		定义弹性容器的侧轴方向上有额外空间时，如何排布每一行/列。
		当弹性容器只有一行/列时无作用。
			flex-start
				所有行/列从侧轴起点开始填充。
				第一行/列的侧轴起点边和容器的侧轴起点边对齐。
				接下来的每一行/列紧跟前一行/列。
			flex-end
				所有弹性元素从侧轴末尾开始填充。
				最后一个弹性元素的侧轴终点和容器的侧轴终点对齐。
				同时所有后续元素与前一个对齐。
			center
				所有行/列朝向容器的中心填充。每行/列互相紧挨，相对于容器居中对齐。
				容器的侧轴起点边和第一行/列的距离相等于容器的侧轴终点边和最后一行/列的距离。
			space-between
				所有行/列在容器中平均分布。相邻两行/列间距相等。
flex-flow：flex-direction和flex-wrap的简写属性
		本质上控制了主轴和侧轴分别是哪一根，以及他们的方向
		默认值row nowrap
		flex-flow:row nowrap;
		
// 项目新增属性：
order:改变项目的排列顺序,值越大越先排列在主轴正方向上,默认值为0
			拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局
align-self：项目自身在侧轴的富裕空间管理
		定义flex子项单独在侧轴方向上的对齐方式。 
		flex-start/flex-end/center/baseline/stretch
		align-self 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 
		如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。
		默认值：auto    不可继承
				auto
					设置为父元素的 align-items 值，
					如果该元素没有父元素的话，就设置为 stretch。
				flex-start
					flex 元素会对齐到 cross-axis 的首端。
				flex-end
					flex 元素会对齐到 cross-axis 的尾端。
				center
					flex 元素会对齐到 cross-axis 的中间，
					如果该元素的 cross-size 的尺寸大于 flex 容器，
					将在两个方向均等溢出。
				baseline
					所有的 flex 元素会沿着基线对齐，
				stretch
					flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸
flex-shrink：收缩因子（默认值为1）会被flex-basis影响
		根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。 
		--.计算收缩因子与基准值乘的总和  
				var a = 每一项flex-shrink*flex-basis之和
		--.计算收缩因数
				收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和   
				var b =  (flex-shrink*flex-basis)/a
		--.移除空间的计算
				移除空间= 项目收缩因数 x 负溢出的空间 
				var c =    b * 溢出的空间      
flex-basis：伸缩规则计算的基准值（默认拿width或height的值）
		指定了 flex 元素在主轴方向上的初始大小
		length值/百分比/content（基于内容自动计算宽度 ）/默认值auto
		注意：在flex简写属性中 flex-basis的默认值为0
		*此属性会改变flex-grow计算方式。
		伸缩规则：
		flex-grow（默认值为0）
				--.可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
				--.可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
				--.每项伸缩大小 = (伸缩基准值flex-basis + (可扩展空间 x flex-grow值))
		flex-shrink：收缩因子（默认值为1）会被flex-basis影响
				根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。 
				--.计算收缩因子与基准值乘的总和  
						var a = 每一项flex-shrink*flex-basis之和
				--.计算收缩因数
						收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和   
						var b =  (flex-shrink*flex-basis)/a
				--.移除空间的计算
						移除空间= 项目收缩因数 x 负溢出的空间 
						var c =    b * 溢出的空间  

flex：（主要针对等分布局）
		flex是 flex-grow，flex-shrink，flex-basis 的简写属性
		默认值  flex-grow: 0     不可继承
					  flex-shrink: 1
					  flex-basis: auto 				
		值：
				flex: none;/* 0 0 auto */
				flex：1;/* 1 1 0% */ 等分布局
			flex:1 /* 等分布局 是一个语法糖，设置的flex-basis是为0*/
			

总结：
// 新版本flex与老版本flex相同的属性
	* 声明display为新版本的弹性盒模型 display: flex; /display: -webkit-flex;
	* 通过flex-direction 确定主轴以及主轴正方向；
			// row/row-reverse/column/column-reverse
	* 通过justify-content管理主轴的富裕空间，通过align-items管理侧轴的富裕空间
			// 单行单列时侧轴富裕空间看align-items 
			// 多行多列时侧轴富裕空间看align-content
			// 项目排列在主/侧轴的正方向上
			// 只决定富裕空间的位置，不会给项目分配空间
			// justify-content: flex-start/flex-end/center/space-between/space-around
			// align-items: flex-start/flex-end/center/baseline/stretch（项目没有高度时等高布局）
	* 通过flex-grow对项目进行拉伸管理（将主轴富裕空间按比例分配到项目上）
			// flex-grow: length值;（会改变项目盒模型大小，默认值为0）
	
// 新版本flex布局新增属性：
* 容器新增属性：多行多列侧轴富裕空间管理
		通过flex-wrap控制侧轴的方向（侧轴堆砌方式）
				// flex-wrap:nowrap（默认）/wrap/wrap-reverse
		通过align-content管理 多行/列时 侧轴的富裕空间
				// align-content：flex-start/flex-end/center/space-between
* 项目新增属性
		通过order改变项目在主轴的排列顺序,值越大越先排列在主轴正方向上
		通过align-self控制项目自身在侧轴的富裕空间管理（会覆盖 align-items 的值）
				// align-self: flex-start/flex-end/center/baseline/stretch
		通过flex-shrink对项目进行收缩控制。
				// 当项目多行/多列时，设置flex-wrap:wrap/wrap-reverse时，此属性失效
		通过flex-basis设置伸缩规则计算的基准值（默认拿width或height的值）
				// 此属性会影响伸缩规则，即控制flex-grow和flex-shrink

* 伸缩规则的计算：(单行/单列时才有伸缩，主要针对项目如何在容器中排列)
		flex-grow（默认值为0）
				--.可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
				--.可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
				--.每项伸缩大小 = (伸缩基准值flex-basis + (可扩展空间 x flex-grow值))
		flex-shrink：收缩因子（默认值为1）会被flex-basis影响
				根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。 
				--.计算收缩因子与基准值乘的总和  
						var a = 每一项flex-shrink*flex-basis之和
				--.计算收缩因数
						收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和   
						var b =  (flex-shrink*flex-basis)/a
				--.移除空间的计算
						移除空间= 项目收缩因数 x 负溢出的空间 
						var c =    b * 溢出的空间  
* flex：（简写属性，主要针对等分布局）
		flex是 flex-grow，flex-shrink，flex-basis 的简写属性
		默认值  flex-grow: 0     不可继承
					  flex-shrink: 1
					  flex-basis: auto 				
		等分布局：（容器）display:flex; 
							（项目）flex:1；
			// flex：1; /* 1 1 0% */是一个语法糖，设置的flex-basis是为0

新版本flex API说明

新版本flex与老版本flex相同的APT说明

// html
<div id="wrap">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
</div>

// css
*{
	margin: 0;
	padding: 0;
}
#wrap{
	width: 400px;
	height: 200px;
	border: 1px solid red;
	margin: 100px auto;
	display: flex;/*1.1. 声明新版本弹性盒子模型 */
		/* 
		display: flex; / display: -webkit-flex;
 		*/

	flex-direction: row-reverse;/*2. 确定主轴及主轴方向*/
		/* 
		新版本的flex通过一个属性和四个属性值控制了主轴的位置和方向
		flex-direction: row / row-reverse / column / column-reverse
		row 从左往右的x轴; 
		row-reverse 从右往左的x轴;
		column 从上往下的y轴;
		column-reverse从下往上的y轴
 		*/
 	
 	/*富裕空间管理不会改变项目盒模型的大小，只会影响项目的位置*/
	justify-content: space-around;/*3. 分配主轴富裕空间*/
		/* 
		justify-content : flex-start / flex-end / center / space-between / space-around
		说明：
		flex-start：在主轴的正方向
		flex-end:	在主轴的反方向
		center：在项目两边（项目居中）
		space-between：在项目之间(两端项目紧挨着包裹器)
		space-around：在项目两边(主轴是x轴时，项目左右都有空间)
		 */
	
	align-items: stretch;/*4. 分配侧轴富裕空间*/
		/* 
		align-items （默认值stretch）/ flex-start / flex-end / center / baseline
		说明：
		flex-start：在侧轴的正方向
		flex-end：  在侧轴的反方向
		center：		在两边(项目居中)
		baseline    基线对齐
		stretch		等高布局（项目没有高度时等高布局,有高度没用）
 		*/					
}
#wrap > .item{
	width: 120px;
	/* 项目没有高度时align-items: stretch;等高布局 */
	/* height: 25px; */
	background: pink;
	border: 1px solid;
	text-align: center;
	
	flex-grow: 1;/*5. 弹性空间管理（将主轴富裕空间按比例分配到项目上），同老版本*/				
}

新版本flex新增的APT说明

容器新增属性：多行/多列时侧轴富裕空间管理

通过flex-wrap控制侧轴的方向（侧轴堆砌方式）
	// flex-wrap:nowrap（默认）/wrap/wrap-reverse
通过align-content管理 多行/列时 侧轴的富裕空间
	// align-content：flex-start/flex-end/center/space-between

// html
<div id="wrap">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
	<div class="item">8</div>
	<div class="item">9</div>
	<div class="item">10</div>
	<div class="item">11</div>
	<div class="item">12</div>
	<div class="item">13</div>
	<div class="item">14</div>
</div>

// css
*{
	margin: 0;
	padding: 0;
}
#wrap{
	width: 300px;
	height: 200px;
	border: 1px solid;
	display: flex;/* 新版本盒模型 */
	flex-direction: row;/* 主轴x轴项目从左向右排列 */
	/* 
	在flex老版本中，如果项目超出容器会默认溢出不换行，所以老版本没这个属性。
	在flex新版本中,如果项目超出容器会默认成单行/单列填充满容器，项目实际盒模型会比设定的要小。
	flex-wrap:控制侧轴堆砌方式（控制的是侧轴的方向）默认值为nowrap
	即如果主轴是x轴，项目盒模型宽度和大于容器盒模型宽度时，可以通过flex-wrap属性可以设置成换行。
		值：
		nowrap 不换行(项目被压缩挤在一行)
		wrap   侧轴方向由上而下，当容器高度大于项目高度和时，行和行之间默认有间隙（flex-shrink失效）
	 		当容器不设高度时，项目会按主轴正方向一行挨着一行从上往下排列
		wrap-reverse 侧轴方向由下而上，当容器高度大于项目高度和时，行和行之间默认有间隙（flex-shrink失效）
			 当容器不设高度时，项目会按主轴正方向一行挨着一行从下往上排列
	 */
	flex-wrap: wrap;
	
	/* 
	align-content：多行/列时 侧轴 富裕空间的管理（把多行/列看成一个整体）
			定义弹性容器的侧轴方向上有额外空间时，如何排布每一行/列。
			当弹性容器只有一行/列时无作用。
			默认值：stretch（默认行与行之间有间隙）	
			值：
				flex-start
					所有行/列从侧轴起点开始填充。
					第一行/列的侧轴起点边和容器的侧轴起点边对齐。
					接下来的每一行/列紧跟前一行/列。
				flex-end
					所有弹性元素从侧轴末尾开始填充。
					最后一个弹性元素的侧轴终点和容器的侧轴终点对齐。
					同时所有后续元素与前一个对齐。
				center
					所有行/列朝向容器的中心填充。每行/列互相紧挨，相对于容器居中对齐。
					容器的侧轴起点边和第一行/列的距离相等于容器的侧轴终点边和最后一行/列的距离。
				space-between
					所有行/列在容器中平均分布。相邻两行/列间距相等。
					多行/多列时，两端的行/列紧挨着容器，行/列之间的富裕空间平均分配
	 */
	align-content: space-between;
	
	/* 
	flex-wrap:nowrap（默认）/wrap/wrap-reverse 
	align-content：stretch（默认） / flex-start/flex-end/center/space-between
	flex-wrap可以理解为控制侧轴富裕空间的方向
	align-content可以理解为控制侧轴富裕空间如何管理
	这两个值主要针对多行/多列项目时才起作用，
	如果是单行/单列项目，侧轴富裕空间看align-items属性，这两个值不起作用。
	 */
	
	
}
.item{
	width: 50px;
	height: 50px;
	background: pink;
	text-align: center;
}

项目新增属性order和align-self

// html
<div id="wrap">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item">4</div>
	<div class="item">5</div>
	<div class="item">6</div>
	<div class="item">7</div>
</div>

// css
*{
	margin: 0;
	padding: 0;
}
#wrap{
	width: 300px;
	height: 200px;
	border: 1px solid;
	display: flex;/* 新版本flex布局 */
	flex-direction: row;/* 主轴x轴，项目从左到右排列 */
}
.item{
	width: 50px;
	height: 50px;
	background: pink;
	text-align: center;
}
.item:nth-child(1){
	/* 
	order:改变项目的排列顺序,值越大越先排列在主轴正方向上,默认值为0
	拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局
	此时设定项目1的order值为2，项目2的order值为3，其他项目order值为0
	项目原本顺序是沿x轴从左往右1、2、3、4、5、6、7排列
	此时项目排列顺序为沿x轴从左往右3、4、5、6、7、1、2
	 */
	order: 2;
}
.item:nth-child(2){
	order: 3;
}

.item:nth-child(3){
	/* 
	align-self：项目自身在侧轴的富裕空间管理
	定义flex子项目单独在侧轴方向上的对齐方式。 
	flex-start/flex-end/center/baseline/stretch
	align-self 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 
	如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。
	默认值：auto    不可继承
		auto
			设置为父元素的 align-items 值，
			如果该元素没有父元素的话，就设置为 stretch。
		flex-start
			flex 元素会对齐到侧轴的首端。
		flex-end
			flex 元素会对齐到侧轴的尾端。
		center
			flex 元素会对齐到侧轴的中间，
			如果该元素的 cross-size 的尺寸大于 flex 容器，
			将在两个方向均等溢出。
		baseline
			所有的 flex 元素会沿着基线对齐，
		stretch
			flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size（侧轴尺寸） 拉伸
			// 这个属性测试时需要height为auto时才起作用，子项目有高度没作用
	 */
	
	align-self:flex-end ;
}

项目新增属性flex-basis和flex-shrink（重点在于理解）

当项目单行/单列排列在容器，
项目盒模型的和大于或者小于容器主轴盒模型大小时，
需要将项目拉伸或者收缩以便适应容器的主轴长度时，
就会用到
flex-grow：拉伸因子（默认值为0），将项目拉长填充满主轴；
flex-shrink：收缩因子（默认值为1），将项目收缩填充满主轴；
	根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
这两个属性会被flex-basis影响。
		
flex-basis：伸缩规则计算的基准值。
	指定了 flex 项目在主轴方向上的初始大小
	就是计算项目拉伸或收缩以便填满容器主轴时，单个项目的宽/高的值；
	默认是用项目width或height的值。
	值：length值/百分比/content（基于内容自动计算宽度 ）/默认值auto
	*此属性会影响flex-grow和flex-shrink计算方式。

// 伸缩规则：
flex-grow（默认值为0）拉伸因子
		--.可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)，
			如果没设置flex-basis则取主轴方向上项目设定的宽/高，项目都没设置flex-basis相当于富裕空间的值。
		--.可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
			将可用空间分成所有项目分成（flex-grow的总和）份。
		--.每项拉伸大小 = (伸缩基准值flex-basis + (可扩展空间 * flex-grow值))
			
flex-shrink：收缩因子（默认值为1）会被flex-basis影响
		根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。 
		--.计算收缩因子与基准值乘的总和  
			var a = 每一项flex-shrink*flex-basis之和
		--.计算收缩因数
			收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和   
			var b =  (flex-shrink*flex-basis)/a
		--.移除空间的计算
			移除空间= 项目收缩因数 x 负溢出的空间 
			var c =    b * 溢出的空间

新版本flex布局整理

在新版本flex布局中：
* 声明display为新版本的弹性盒模型 display: flex; /display: -webkit-flex;
* 项目单行/单列排列在容器中时：
	通过flex-direction 确定主轴以及主轴正方向（项目在主轴排列方向）；
		// flex-direction： row/row-reverse/column/column-reverse
	通过justify-content管理主轴的富裕空间，
		// justify-content: flex-start/flex-end/center/space-between/space-around
	通过align-items管理侧轴的富裕空间		
		// align-items: flex-start/flex-end/center/baseline/stretch（项目没有高度时等高布局）
		说明：
			单行单列时侧轴富裕空间看align-items
			多行多列时侧轴富裕空间看align-content
			项目排列在主/侧轴的正方向上
			富裕空间的管理只决定富裕空间的位置，不会给项目分配空间。
	通过order改变项目在主轴的排列顺序,值越大越先排列在主轴正方向上
	通过align-self控制项目自身在侧轴的富裕空间管理（会覆盖 align-items 的值）
		// align-self: flex-start/flex-end/center/baseline/stretch
	通过flex-basis设置伸缩规则计算的基准值（默认拿项目width或height的值）
		// 此属性会影响伸缩规则，即控制flex-grow和flex-shrink
	通过flex-grow拉伸因子，将项目拉伸填充满容器主轴
	通过flex-shrink收缩因子，将项目收缩填充满容器主轴
		
		伸缩规则的计算：(单行/单列时才有伸缩，主要针对项目如何填充满容器主轴)
			flex-grow（默认值为0）
				--.可用空间 = (容器大小 - 所有相邻项目flex-basis的总和)
				--.可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
				--.每项伸缩大小 = (伸缩基准值flex-basis + (可扩展空间 x flex-grow值))
			flex-shrink：收缩因子（默认值为1）会被flex-basis影响
				根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
				// 当设置flex-wrap:wrap/wrap-reverse，项目为多行/多列时，此属性失效。
				--.计算收缩因子与基准值乘的总和  
					var a = 每一项flex-shrink*flex-basis之和
				--.计算收缩因数
					收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和   
					var b =  (flex-shrink*flex-basis)/a
				--.移除空间的计算
					移除空间= 项目收缩因数 x 负溢出的空间 
					var c =    b * 溢出的空间	
									
* 项目多行/多列排列在容器中时：（此时容器出现坐标系，并可以设定坐标系方向）
	通过flex-direction 确定主轴以及主轴正方向（项目在主轴排列方向）；
		// flex-direction： row/row-reverse/column/column-reverse
	通过justify-content管理主轴的富裕空间；
		// justify-content: flex-start/flex-end/center/space-between/space-around
	通过flex-wrap控制侧轴的方向（侧轴堆砌方式）
		// flex-wrap:nowrap（默认）/wrap/wrap-reverse
	通过align-content控制项目在侧轴排列方式
		// align-content：flex-start/flex-end/center/space-between
		此时单行/单列时管理侧轴富裕空间的属性align-items失去作用
				 
* flex：（简写属性，主要针对等分布局）
	flex是 flex-grow，flex-shrink，flex-basis 的简写属性
	默认值  
		flex-grow: 0     不可继承
		flex-shrink: 1
		flex-basis: auto 				
	等分布局：
		（容器）display:flex; 
		（项目）flex:1；
		// flex：1; /* 1 1 0% */是一个语法糖，设置的flex-basis是为0