flex弹性布局

关于display:flex;弹性布局的常用属性介绍

1.父级节点：display:flex；

	a.这个属性使用之后类似于给自己所有节点添加了浮动属性;
	b.如果父级使用了弹性布局，那么子元素就不需要添加float属性了;
	(对浏览器的兼容情况不错，但还有个别浏览器会出现问题，
	这里可以添加浏览器前缀，但这个工作可以让插件来做，postCss)

2.父级上的其他几个属性（在工作中经常会用到）

	<1> justify-content:			这个属性主要作用是规定子元素的水平排列方式；
		值:center			子元素水平居中（是所有的子元素整体水平居中）
			space-between 	子元素两端对齐
			space-around	每个子元素拥有独自的左右距离
			flex-start		默认值 子元素水平居左；
			flex-end		子元素水平居右；	
	<2> align-items:				规定子元素垂直排列方式
		值:center			子元素垂直居中
			flex-start		子元素垂直居上；
			flex-end		子元素垂直居中；
	<3>	align-content：				多行子元素的垂直排列 
		值:center			子元素垂直居中
			flex-start		子元素垂直居上；
			flex-end		子元素垂直居中；
			stretch			拉伸（默认值）
	<4> flex-direction:				这个属性设置子元素排列方向
		值:row					横向排列
			row-reverse		横向倒叙排列
			column  			纵向排列
			column-reverse	纵向倒叙排列
	这里需要注意：当你设置了子元素纵向排列方向后，前两个属性也会随着改变方向！！！
	<5>	flex-wrap:					子元素是否正常换行
			值: wrap			正常换行
			nowrap			不换行，默认值
	<6> flex-flow: <flex-direction><flex-wrap> 相当于<4><5>的结合
			例：flex-flow:column warp	纵向正常换行

3.子级上的属性

	<1> flex:1;		1：指的是系数；用来设置每个子结点的宽度
		注意：子元素在划分父级的宽度的时候，会先排除固定的宽度；
	<2> align-self：flex-start; 可以覆盖父级的align-items 垂直排列
	<3> flex-grow:1; 	定义子元素放大比例 默认值为0
	<4> order:0		规定子元素的顺序，数值越小越靠前 默认值为0