移动端flex布局

移动端flex布局
.box{
  display: -webkit-flex;               //Safari
  display: flex;
  flex-direction: row/column;         //设置主轴方向
  flex-wrap: wrap//换行; nowrap //不换行                 
  justify-content //主轴对齐方式: flex-start、flex-end、center、space-between//第一个和最后一个靠两边，中间平均分布，空格填充、space-around//两边空格填充;
  align-items //交叉轴对齐方式: flex-start、flex-end、center、baseline //根据文本对齐、stretch//如果没有设高度或者宽度，拉长至两端;
  align-content //多行的对齐方式: 同align-items;
}
.item{
  align-self: 同align-items;
  order：0、1、2... //定义排列顺序
  flex-grow：0、1、2... //定义有空间是否自动扩展
  flex-shrink：0、1、2... //定义无空间是否自动缩小
  flex-basis：不常用
}

参考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html