弹性盒子（移动端布局）

弹性盒子（移动端布局）

1.任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex; //形成弹性盒
}
//display:inline-flex行内元素形成弹性盒
//display: -webkit-flex; Webkit 内核的浏览器

2.容器的属性（盒子属性）

 	1.flex-direction   //属性决定主轴的方向（即项目的排列方向）。
		 - row（默认值）：主轴为水平方向，起点在左端。 	
		 - row-reverse：主轴为水平方向，起点在右端。
		 - column：主轴为垂直方向，起点在上沿。 	
		 - column-reverse：主轴为垂直方向，起点在下沿。
	2.flex-wrap  //该属性决定形成弹性盒后是否换行
 		- nowrap（默认）：不换行。
 		- wrap：换行，第一行在上方。
 		- wrap-reverse：换行，第一行在下方。

	3.flex-flow //flex-flow属性是flex-direction属性和flex-wrap属性的简写形式
	
	4.justify-content //主轴对齐方式
 		- flex-start（默认值）：左对齐
 		- flex-end：右对齐
 		- center： 居中
 		- space-between：两端对齐。
 		- space-around：平均分配

	5.align-items //定义元素在侧轴的对齐方式
 		- flex-start：侧轴的起点对齐。
 		- flex-end：侧轴的终点对齐。
 		- center：侧轴的中点对齐。
 		- baseline：侧轴的第一行文字的基线对齐。
 		- stretch（默认值）未设置高度将被拉伸

	6.align-content //定义了主轴多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
		- flex-start：与侧轴的起点对齐。
		- flex-end：与侧轴的终点对齐。
		- center：与侧轴的中点对齐。
		- space-between：与侧轴两端对齐，轴线之间的间隔平均分布。
		- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
		- stretch（默认值）：轴线占满整个侧轴。

3.弹性盒内部元素属性

	1.order //属性定义弹性盒内部元素的排列顺序。数值越小，排列越靠前，默认为0。
		.item {
		 	order: <integer>; //integer数值
		}
	2.flex-grow //属性定义弹性盒内部元素的放大比例，默认为0，即如果存在剩余空间，也不放大。
		.item {
		  flex-grow: <number>; //number数值，数值越大所占比例越大
		}
	3.flex-shrink //属性定义了弹性盒内部元素的缩小比例，默认为1，即如果空间不足，该项目将缩小。
		.item {
		  flex-shrink: <number>; //number数值，负值对该属性无效。
		}
	4.flex-basis //属性定义了在分配多余空间之前，项目占据的主轴空间。
	
	5.flex //属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
	
	6.align-self //属性允许单个元素有与其他元素不一样的对齐方式，可覆盖align-items属性。