flex

容器上的属性：

flex-direction: row | row-reverse | column | column-reverse (项目的排列方向)

flex-wrap : nowrap | wrap | wrap-reverse (换行情况)

flex-flow ： <flex-direction> || <flex-wrap>  ( flex-direction属性和flex-wrap属性的简写形式)

justify-content : flex-start | flex-end | center | space-between | space-around(主轴对齐方向)

align-items : flex-start | flex-end | center | baseline | stretch(交叉轴上如何对齐)

align-content :(flex-start | flex-end | center | space-between | space-around | stretch属性定义了多根轴线的对齐方式)

项目的属性：

order : <integer> (项目的排列顺序。数值越小，排列越靠前，默认为0)

flex-grow : <number> (项目的放大比例，默认为0，即如果存在剩余空间，也不放大。)

flex-shrink : <number>(项目的缩小比例，默认为1，即如果空间不足，该项目将缩小)

flex-basis : <length> | auto(在分配多余空间之前，项目占据的主轴空间)

flex : none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ](flex-grow, flex-shrink 和 flex-basis的简写)

align-self: auto | flex-start | flex-end | center | baseline | stretch(允许单个项目有与其他项目不一样的对齐方式)

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