使用 flexbox 布局

[cherislive]

Flexbox意为"弹性布局"，用来为盒状模型提供最大的灵活性。

下面是我们通常的做法：

<div class="flex-equal">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

.flex-equal{display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;}
.flex-equal > .col{-webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1;}

上边的代码支持任意列数，他们能够自动等宽并且可以只适应宽度！

在窄屏下排成一列

.flex-equal{display:block;}

列与列间隔，你可以添加 margin、padding 到列上、用宽度补齐（justification）创建列

.flex-equal {display: flex;  justify-content: space-between;}
.flex-equal  .col { width: 32%;}