flex布局

转载http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
    
页面布局

	布局的传统解决方案，基于盒模型，依赖display属性+position属性+float属性,对于特殊布局非常不方便,比如垂直居中.
	2009年提出了flex布局,得到所有的浏览器的支持
	
一. flex布局是什么
		一个容器设置为flex布局
			.box{
				display: flex;
			}
		行内元素也可以使用flex
			.box{
				display: inline-flex;
			}
		Webkit内核的浏览器,必须加上-webkit-前缀
			.box{
				display: -webkit-flex; /* Safari*/
				display: flex;
			}
		设为flex布局后,float,cleat和vertical-align属性将失效.
		
二. 容器的属性
		1.flex-direction:
		2.flex-wrap
		3.flex-flow
		4.justify-content
		5.align-items
		6.align-content
		
		1.1 flex-direction 决定主轴的方向,项目的排列方向
			.box{
				flex-direction: row| row-reverse | column | column-reverse
			}
			分为对应水平方向,起点在左端；水平方向,起点右端；垂直方向,起点在上；垂直广向,起点在下；

        2.1 flex-wrap属性 一条轴线,一条轴线排不完,如何换行
            .box{
                flex-wrap: nowrap | wrap | wrap-reverse
            }
            (1)nowrap (默认) 不换行

            (2)wrap 换行

            (3)wrap-reverse 换行,第一行在下方

        3.1 flex-flow 是felx-direction和flex-wrap 的简写
        
        4.1 justify-content 项目在主轴上的对齐方式
            .box{
                justify-content: flex-start | flex-end | center | space-between | space-around
            }

        5.1 align-items 在交叉轴的对齐
            .box{
                align-items: flex-start | flex-end | center | baseline | stretch
            }

        6.1 align-content 定义多根轴线的对齐方式
            .box{
                align-content: flex-start | flex-end | center | space-between | space-around | stretch
            }

    三. 项目的属性
        1. order
        2. flex-grow 
        3. flex-shrink
        4. flex-basis
        5. flex
        6. align-self
        
        1.1 order 项目的排列顺序数值越小,排列越靠前,默认为0
            .item{
                order: <integer>
            }

        2.1 flex-grow 项目的放大比例,默认为0,如果存在剩余空间,也不入大
            .item{
                flex-grow: <number>
            }

            如果flex-grow 属性为1,则它们将等分空间,如果有一个2,其实为1,则等分空间
            
        3.1 flex-shrink 定义了项目的缩小比例,默认1 ,如果空间不足,则该项目缩小
            .item{
                flex-shrink:<number>
            }

            如果属性为１，空间不足时，都等比例缩小，如果一个项上的flex-shrink 的属性为０，其他项目为１，则空间不足时，前者不缩小，负值无效
            
        4.1 flex-basis 属性分配多余空间之前，项目占据主轴空间．浏览器根据这个属性是否有多余空间，默认为auto，既项目的本来大小
        
        5.l flex 属性是flex-grow ,flex-shrink和flex-basis的简写 默认值为0 1 auto 后两个属性可以选
        
        6. align-self属性 
            align-self允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素align-items属性,如果没有父元素,则等同于stretch