flex 布局

display: flex;
display: inline-flex; // 针对行内元素

Webkit 内核的浏览器,必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

flex-flow // 决定自动换行
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; // 多段内容

更多看 : http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html