关于CSS flex布局学习笔记整理

		1.传统的布局方案
			display属性
			position属性
			float属性
			
				
		2.新推荐的布局方案
			flex布局,将成为未来布局方案的首选
			响应式实现各种页面布局
			任何一个容器都可以指定为flex布局
			主流浏览器已基本全部支持
			不同内核的浏览器注意添加前缀问题
			子元素的float \clear\ vertical-align属性会失效
				1.块元素 display:flex
				2.行内元素 display: line-flex
			
			
				
		3.使用flex属性指定一个父容器,以下常用属性用在父容器上
			flex-direction: 指定子元素的排列方向, 
				 (row | row-reverse | column | column-reverse)
				 
			flex-wrap: 指定子元素排列在一条线上,如果一条线排不下如何换行?
				 (nowrap | wrap | wrap-reverse)
				 
			flex-flow: 为前两者的缩写 ,默认值为row nowrap	
							
			justify-content: 定义子元素的对齐方式
				[flex-start(左对齐) | flex-end(右对齐) | center(居中)]
				[space-between(两端对齐,每个子元素之间间隔相等)]
				[space-around(每个子元素两侧的间隔相等,且间距比子元素到边框的间隔大一倍)]
				
			align-items: 每个子元素在交叉轴上对齐方式
				(flex-start|flex-end|center|baseline|stretch)
				baseline 第一行文字的基线对齐
				stretch 如果项目未设置高度或者设为auto,将占满整个容器的高度
			align-content:多个子元素的对齐方式,如果只有一种轴线,则不起作用
		
		
			
		4.以下6个属性用在子元素上
			order: 0
				定义每个子元素的排列顺序,数值越小排列越靠前,默认值为0
				
			flex-grow: 0
				定义子元素的放大比例,默认为0,
				如果为1,则每一个子元素将会等分剩余空间
				如果其中一个子元素为2,其他的子元素为1,则改元素所占空间是其他子元素的2倍
				
			flex-shrink:1
				定义子元素的缩小比例,默认1,如果空间不足,则该元素就会缩小
				如果都为1,则空间不足的时候等比例缩小
				如果改元素为0,其他子元素为1,空间不足时,则改元素不缩小
				
			flex-basis:auto
				定义子元素在分配多余空间之前,子元素占据的空间,浏览器则会自动计算多余空间
				如果给定宽高,则改元素将占据固定的空间
				
			flex:0 | 1 | auto
				为flex-grow|flex-shrink|flex-basis属性的缩写
				
			align-self: auto
				指定某个子元素与其他子元素不同的对齐方式
				会覆盖父元素align-items属性
				(auto | flex-start | flex-end | center | baseline | stretch)

关于弹性布局更多学习点击如下链接即可:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html