使用 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