移动端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