flex布局

1.容器属性(在父元素里的设置)

示例：
	<div class="box">
		<div class="box1">1</div>
		<div class="box2">2</div>
		<div class="box3">3</div>
	</div>

1.display
	display:flex | inline-flex
	块级伸缩容器 | 行内级伸缩容器

2.flex-direction 指定主轴方向 
	 row (默认值-水平靠左对齐) 
	 | row-reverse（水平靠-右对齐-子元素顺序相反321 ） 
	 | column （垂直对齐-靠上）
	 | column-reverse（垂直对齐-靠下-子元素顺序相反321）

3.flex-wraw: 伸缩容器在主轴（水平）方向空间不足情况下，是否换行以及如何换行
	nowrap (默认值-不换行)
	| wrap (换行)
	| wrap-reverse (多余部分被换行)

4.flex-flow: 是flex-direction 与 flex-wraw 的缩写版本，它同时定义了伸缩容器的主轴和侧轴，默认值为 row nowrap

5.justify-conter: 用来定义伸缩项目在主轴线（水平）的对齐方式
	flex-start(默认值 左对齐)
	| flex-end 右对齐
	| centent 居中
	| space-between 分散对齐
	| spance-around 平均对齐

6.align-items: 用来定义伸缩项目在交叉轴（垂直）的对齐方式
	flex-atart 左对齐
	| flex-end 右对齐
	| center 居中
	| baseline 项目的第一行文字的基线对齐
	| stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

7.align-content:用来定义伸缩项目在出现换行后交叉轴的对齐方式
	注意：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
	flex-start 左对齐
	| flex-end 右对齐
	| centent 居中
	| space-between 分散对齐
	| spance-around 平均对齐
	stretch（默认值）