CSS3_自适应布局

一、什么是弹性盒布局（可伸缩的盒子）

优势：1》写起来比较简单
	  2》灵活性、代码优雅

缺点：1》不兼容ie和安卓低级版本

二、使用

容器  		  (父元素)

	display:flex   : 让容器成员是弹性的项目
	flex-direction : 决定主轴是什么方向(项目排序方向)
					 row    : 横向
					 column : 纵向
					 row-reverse :横向翻转
					 column-reverse ：纵向翻转
	
	flex-wrap	   : 让项目是否换行

					nowrap : 不换行
					wrap   : 换行
					wrap-reverse ：换行翻转
	
	flex-flow      : direction wrap
     
    justify-content : 横向盒子摆放

    				flex-start    : 靠左
    				flex-end      : 靠右
    				center        : 水平居中
    				space-between : 项目两端对齐,项目之间的距离都相等
    				space-around  : 每个项目两侧距离相等，项目之间的距离比两侧距离大一倍
	
	algin-items     : 纵向盒子摆放

					flex-start 	   : 靠上
					flex-end       : 靠下
					center         : 垂直居中
					baseline       : 项目第一行文字为基线
					stretch        : 如果容器没有设置高度或者auto则占满整个高度

容器成员|项目 (子元素)

		
		order       : 排序方式，数值越小，越靠前
		flex-grow   : 默认值0，比例放大
		flex-shrink : 默认值1，比例缩小
		flex-basis  : 相当于width
		flex:		：复合(grow + shrink + basis)
					默认值：0 1 auto
					
					后俩个值是可选择