flex布局

前言：

    flex布局( flexible box 弹性布局)之前有了解，但一直未实际使用过。最近在写步骤条组件，尝试着使用       了一下，发现真的挺方便的。

    参考文档主要是阮一峰老师的两篇文章：

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

    文章中对flex都有详细的讲解，因此接下来的内容只是自己本次实践中的一个总结，便于以后回顾。

总结：

1. flex布局中两个基本概念：flex容器（container），和 flex项目（item）。

    任何元素都可以设置其display: flex | inline-flex，使其成为flex容器。那么该元素下的直接子元素就是       item。item同时也可以设置display：flex而成为       flex容器。

2. 可以通过设置容器的属性，来控制item的显示方向，对齐方式等。具体属性有：

    flex-direction：row(默认值) | row-reverse | column  | column-reverse   

                          ——item显示方向

    flex-wrap:  nowrap(默认值) | wrap | warp-reverse             

                         ——一条轴线显示不下时是否换行。

    flex-flow: row nowrap(默认值)            

                          ——flex-direction与flex-wrap的简写形式。

    justify-content： flex-start(默认值) | flex-end | center | space-between | spanc-around      

                          ——item在主轴上对齐方式

    align-items: flex-start | flex-end | center | baseline | stretch (默认值)    

                         ——item在交叉轴上的对齐方式

            ——baseline：item的第一行文字为基准线对齐；

            ——stretch：如果item未设置高度或者为auto，则占满整个容器的高度。   

    align-content： flex-start | flex-end | center | space-between | space-around | stretch(默认值)                             

——设置多根轴线item的对齐方式，一根轴线时不起作用。

3. item的属性：

    order: item的排列属性，数值越小，越靠前。默认为0；

    flex-grow: item放大比例。默认值为0，即如果存在剩余空间，也不放大。 

                     如果所有item的flex-grow都为1，则它们等分剩余空间，如果某个item的flex-grow为2，则其占有的剩余空间比其他多一倍；

    flex-shrink：item缩小比例。默认值为1，即如果空间不足，则将item缩小。

                      如果某个item的flex-shrink为0，其他都为1，则在空间不足的时候，前者不缩小。

    flex-basis: 在分配多余空间前，items所占据的空间。默认为auto，即items本来的大小。

    flex: flex-grow flex-shrink flex-basis 三个属性的缩写。默认值为：0 1 auto 

    align-self:  设置单个item与其他items不同的对其方式。