使用 Flexbox 实现一个网格系统

1. 一行的元素平分整行宽度

  <div class="columns">
    <div class="column">
      <div class="box">Hello World</div>
    </div>
    <div class="column">
      <div class="box">Hello World</div>
    </div>
    <div class="column">
      <div class="box">Hello World</div>
    </div>
  </div>

.box {
  padding: 20px;
  border: 1px solid #ddd;
}

.columns{
  display: flex;
}

.column {
  flex: 1
}

最重要的一点是给这一行的父元素(columns)的直接子元素(column)设置flex: 1。这样元素才会平分整行空间，否则就只会占据元素本身的大小，挤在一起。

2. 指定元素占据一定的宽度

这里我们按照常用的12列网格系统来计算。那么我们有以下几个需求：

1. 指定元素占据的列数
2. 当总的列数加起来超过12时，自动切换到下一行

  <div class="columns is-multiline">
    <div class="column is-6">
      <div class="box">Hello World</div>
    </div>
    <div class="column is-6">
      <div class="box">Hello World</div>
    </div>
    <div class="column is-2">
      <div class="box">Hello World</div>
    </div>
    <div class="column is-10">
      <div class="box">Hello World</div>
    </div>
  </div>

.columns{
  display: flex;
}
.columns.is-multiline{
  flex-wrap: wrap;
}

.column {
  flex: 1
}

.column.is-6 {
  width: 50%;
  flex: none;
}

.column.is-2{
  width: 16.66667%;
  flex: none;
}

.column.is-10 {
  width: 83.333%;
  flex:none;
}

这里的重点是给column一个辅助类is-*, is-*的定义一方面通过百分比指定了宽度，另一方面重要的是设置了flex:none，否则元素就还是会采用平分宽度的方法而非指定。

第二点是给了columns一个辅助类is-multiline。is-multiline的作用是设置了flex-wrap: wrap。如果没有这个属性，超出12列的宽度之后，这些列就不会向下走，而是再向右延伸。

3. 元素占据原本的宽度

  <div class="columns">
    <div class="column is-narrow">
      <div class="box">Hello World</div>
    </div>
    <div class="column">
      <div class="box">Hello World</div>
    </div>
    <div class="column is-narrow">
      <div class="box">Hello World</div>
    </div>
  </div>

.columns{
  display: flex;
}

.column {
  flex: 1
}

.column.is-narrow{
  flex:none;
}

这里我们给希望只占据元素本来的宽度的column一个辅助类is-narrow。它设置了flex:none这个属性，否则的元三个元素就会平分整行的宽度。添加is-narrow类，前后两个元素就占据本来的宽度，而中间那个元素就会占据剩余的宽度。

参考

Laracasts