flexbox一些常用布局

[zhouwenbin]

很多同学都不太熟悉flexbox布局，觉得兼容性不好，还有的被各种属性绕晕了，有了恐惧的心理。其实flexbox在移动端已经兼容很好了，借助autoprefixer可以很容易的实现，常见的布局也只有几种，所以不需要感到恐惧。下面整理的几种方法，如没特别指明，都兼容到android4.1以上

子元素等分

这种布局常用于底部的导航或者tab等分

ul{
  display:flex;
}
li{
  flex:1;
}

demo点这里

左右固定宽度，中间自适应

这种布局常用于左右各有图标的列表

ul{
  display:flex;
}
li:first-child,
li:last-child{
  width:50px;
}
li:nth-child(2){
  flex:1;
}

demo点这里

底部贴底

这种布局常用于底部导航，中间模拟滚动。

html,body,ul{
  height:100%;
}
ul{
  display:flex;
  flex-direction:column;
}
li:first-child,
li:last-child{
  height:50px;
}
li:nth-child(2){
  flex:1;
}

demo点这里

多行多列

这种布局常用于商品列表,android4.4以下不支持

ul{
  display:flex;
  flex-wrap:wrap;
}
li{
  width:50%;
}

demo点这里

两端对齐垂直居中

这种布局常用于模块头部

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

demo点这里

水平垂直居中

这种布局常用于固定容器的图片垂直居中。

header{
  display:flex;
  justify-content:center;
  align-items:center;
}

demo点这里

子元素横向排列，超过父容器宽度不换行

这种布局常用来做slider

ul{
  display:flex;
}
li{
  flex-shrink:0;
}

demo点这里