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;    }    主轴的方向（即项目的排列方向），默认值为row2. 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 nowarp4. justify-content    .box {        justify-content: flex-start | flex-end | center | space-between | space-round;    }    项目在主轴上的对齐方式, 默认值为flex-srart5. 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>    }    项目的排列顺序，数值越小越靠前，默认为02. 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-axis2. box-driection    .box {        box-direction: normal | reverse | inherit    }    确定子元素的排列顺序，默认值为normal3. box-align    .box {        box-align: start | end | center | baseline | stretch    }    垂直方向的对齐方式，默认值为stretch4. box-pack    .box {        box-pack: start | end | center | justify    }    水平方向的对齐方式，默认值为start5. box-lines    .box {        box-lines: single | multiple    }    子元素是否可以换行显示，默认值为single6. box-flex    .item {        box-flex: <number>    }    默认值为17. box-flex-group8. 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