FlexBox布局详解

flex布局（弹性盒子）

能自适应屏幕大小，并且对于移动端的开发非常方便

flex的用法

当父元素设置flex时子 元素的float clear vertical-align将失效
给盒子元素添加 display：flex 设置盒子为flex布局
一般是给父容器添加这个属性
父容器添加的属性一般有以下几个

flex-direction:设置主轴的方向
		取值：   row（默认值）：从左到右（第三个）
					 row-reverse:从右到左（第四个）
					 colum:从上到下（第二个）
					 colum-reverse:从下到上（第一个）

	flex-wrap：设置当一行放不下元素是是否换行
		notwrap：不换行（默认值）
		wrap:换行    第二行在第一行下面

wrap-reverse： 第二行再第一行上面 和wrap相反

		justify-content： 子元素对其方式
				flex-start：在对齐
				flex-end：右对齐
				center：居中
				space-around: 居中效果 中间的间距会比两侧大一倍（中间等于有左元素的间距+右元素间距所以大一倍）

space-between（特殊并且重要）： 两边的元素切边 剩下的距离中间元素平分

align-item对单行进行对齐
align-item:这个属性要根据flex-direction的属性
当flex-direction设置为row时 align-item是根据 column进行对齐的
当flex-direction设置为column时 align-item是根据 row进行对齐
简单说就是根据flex-direction相反的值
注意 row-reverse也算是 row
align-item:取值 此时我默认为flex-direction为row
flex-start： 按照column 对齐 （效果：向上对齐）

flex-end：向下对齐
flex-center：按照column居中对齐
stretch: 重直拉伸 把子元素height设置100% 一样的效果（此时子元素不能设置高）
backline：根据第一个元素文字对齐

align-content:对多行元素进行对齐
取值：flex-start：和align-item的一样
flex-end： 参考align-item
flex-center 也是 区别是一个对单行（align-item） 一个多行（align-content）
space-between:上下贴边中间距离平分 （当flex-direction：row时） 为column时相反
space-around： 平分上下距离（当flex-direction：row时） 为column时相反
flex-flow： flex-direction 和 flex-wrap的复合属性
flex-direction:column；
flex-wrap:wrap;
等价于
flex-flow: column wrap

子元素属性

	flex:1  表示子元素宽度的份数

	order:设置子元素排序的顺序默认0 越小越靠前