flex布局

display:flex;
display:-webkit-flex;

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap:wrap|nowrap|wrap-reverse
flex-flow = flex-direction + flex-wrap =( row nowrap )

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;

flex = flex-grow + flex-shrink + flex-basis = ( 0 1 auto）

align-self: auto | flex-start | flex-end | center | baseline | stretch;

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