Flexible Box布局

.box {
    display: flex;
}

.box {
    display: inline-flex;
}

.box {
    display: -webkit-flex;
    display: flex;
}

容器属性

1. flex-direction
    .box {
        flex-driection: row | row-reverse | column | column-reverse;
    }
    主轴的方向（即项目的排列方向），默认值为row

2. flex-wrap
    .box {
        flex-wrap: nowrap | wrap | wrap-reverse;
    }
    如果一条轴线放不下，定义换行方式，默认值为nowrap，项目都排在一条轴线上

3. flex-flow
    .box {
        flex-flow: <flex-direction> || <flex-wrap>;
    }
    是flex-dierction和flex-warp的简写，默认值为row nowarp

4. justify-content
    .box {
        justify-content: flex-start | flex-end | center | space-between | space-round;
    }
    项目在主轴上的对齐方式, 默认值为flex-srart

5. align-items
    .box {
        align-items: flex-start | flex-end | center | baseline | stretch
    }
    项目在交叉轴上的对齐方式,默认值为stretch,如果项目未设置高度或设为auto，将占满整个容器的高度

6. align-content
    .box {
        align-content: flex-start | flex-end | center | space-between | space-round | stretch
    }
    多根轴线的对齐方式, 默认值为stretch,轴线占满整个交叉轴

项目属性

1. order
    .item {
        order:<integer>
    }
    项目的排列顺序，数值越小越靠前，默认为0

2. flex-grow 
    .item {
        flex-grow: <number>
    }
    项目放大比例

3. flex-shrink
    .item {
        flex-shrink: <number>
    }
    项目缩小比例

4. flex-basis
    .item {
        flex-basis: <length>|auto   
    }

    在分配剩余空间时，项目占据的主轴空间

5. flex
    .item {
        flex: none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]
    }   
    快捷值：auto(1 1 auto)和none(0 0 auto)

6. align-self
    .item {
        align-self: auto|flex-start|flex-end|center|baseline|stretch
    }
    允许单个项目有和其他项目不一样的对齐方式，可覆盖align-items,默认值为auto,表示继承父元素的align-items属性,如果没有父元素，则等于stretch

Flexible Box Model(弹性盒模型)

1. box-orient 
    .box {
        box-orient: horizontal | vertical | inline-axis | block-axis | inherit
    }
    确定子元素的方向，默认值为inline-axis

2. box-driection
    .box {
        box-direction: normal | reverse | inherit
    }
    确定子元素的排列顺序，默认值为normal

3. box-align
    .box {
        box-align: start | end | center | baseline | stretch
    }
    垂直方向的对齐方式，默认值为stretch

4. box-pack
    .box {
        box-pack: start | end | center | justify
    }
    水平方向的对齐方式，默认值为start

5. box-lines
    .box {
        box-lines: single | multiple
    }
    子元素是否可以换行显示，默认值为single

6. box-flex
    .item {
        box-flex: <number>
    }
    默认值为1
7. box-flex-group
8. box-ordinal-group

参考链接：
1. http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex属性，然后弹性盒子模型简介/
2. http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool