css3:display前端弹性盒布局

教程来源：http://www.runoob.com/w3cnote/flex-grammar.html

css3属性diaplay新增取值：

知识总结

Flex布局是什么？：Flex是Flexible Box的缩写，意为”弹性布局”。

声明：

任何一个容器都可以指定为Flex布局（div）
行内元素也可以使用Flex布局（li，a等）

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念：
采用Flex布局的元素，（flex container），简称”容器”。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

容器的属性

以下6个属性设置在容器上。
        flex-direction
        flex-wrap
        flex-flow //默认值为row nowrap,项目的排列方向,换行?
        justify-content //定义了项目在主轴上的对齐方式
        align-items    //定义项目在交叉轴上如何对齐
        align-content  //定义了多根轴线的对齐方式

项目的属性

以下6个属性设置在项目上。
        order //order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
        flex-grow //flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
        flex-shrink //flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
        flex-basis //定义了在分配多余空间之前，
        //项目占据的（main size)浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
        flex //flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
        align-self // align-self属性允许单个项目有与其他项目不一样的对齐方式

code：

.flex{

     display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    justify-content: space-between;
}