列表响应式布局--三种CSS方案

最近需要做一些带图片的布局，适用于桌面及移动端。参考了一些网站的实践方案，在此做个总结。

整体思路:

  1. 每张图片高宽一致，居中对齐
  2. 根据设备宽度不同，自动换行

总结下来，便有了三种方案。

  1. 流式布局—— Float
  2. 内联布局—— Inline-block
  3. CSS3新特性—— Flexbox

简单写下三种布局的实现：

1.流式布局—— Float

流式布局是最为常见的一种方案，但很多时候也不太愿意使用，因为浮动的样式会造成内部内容高宽的不可控，在此参考了dribble的方案，利用:after额外添加内容，并清除浮动，保证高度的可控。

/*float layout*/
.float {
  max-width: 1200px;
  margin: 0 auto;
}
.float:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.float-item {
  float: left;
}

2.内联布局—— Inline-block

内联方式会有一个缺点，就是每个item间会默认留一个空格的间距，即最终的间距＝外边距＋1个空格。

/*inline-block*/
.inline-b {
  max-width:1200px;
  margin:0 auto;
}
.inline-b-item {
  display: inline-block;
}

3.CSS3新特性—— Flexbox

Flexbox为CSS3标准的新特性，它的加入也让页面的布局更丰富和灵活。其功能较多，在此不做详细介绍，详情可查看 CSS-Tricks 讲解。

/*Flexbox*/
.flex {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

最终效果见下方：

See the Pen Responsive List Layout (Flexbox vs Float vs Inline-Block) by Hector Guo (@hectorguo) on CodePen.

最后列个表，方便对比。

  适用场景 兼容性 参考网站
Float 常规实现，适用于列表item较多，强调整体对齐 适用所有 dribble
Inline-block 对各个item间宽度精度要求不高，item较少 IE8+  
Flexbox 对移动端有针对性设计，强调居中对齐 IE10+（IE10需加前缀-ms-） CSS-tricks