Flex弹性布局

最近想写个作品集，主页用多个相同的div去布局，突然想到了CSS里还有一个重要的布局方式Flex，下面是根据阮一峰老师的博客，对display:flex进行简单的语法介绍：

.box {
        /*height: 300px;*/
        display: flex;
        /*background: #f7f7f7;*/
        flex-direction: row; /*主轴方向:flex-direction: row | row-reverse | column | column-reverse;*/
        flex-wrap: wrap; /*如何换行:flex-wrap: nowrap | wrap | wrap-reverse;*/
        justify-content: center; /*项目水平轴对齐方式:justify-content: flex-start | flex-end | center | space-between | space-around;*/
        /*flex-flow: ;!*flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*!*/
        align-items: center; /*项目交叉轴对齐方式:align-items: flex-start | flex-end | center | baseline | stretch;*/
        align-content: center; /*多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/

    }

    /*
        项目的属性
            1.order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
            2.flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
            3.flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
            4.flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
            5.flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
            6.align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
    */

原文地址：
语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html