Flexboxを使用してグリッドシステムを実装

1.1行の要素を行全体の幅に分割

  

    

      
Hello World
    
    

      
Hello World
    
    

      
Hello World
    
  

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

.columns{
  display: flex;
}

.column {
  flex: 1
}

最も重要な点は、この行の親要素(columns)の直接サブ要素(column)にflex: 1を設定することである.これにより、要素は行全体の空間を分割します.そうしないと、要素自体の大きさを占め、押し合います.
2.エレメントの幅を指定
ここでは,よく用いられる12列メッシュシステムに従って計算した.では、次のようなニーズがあります.

指定要素が占める列数

合計の列数が12を超えると、自動的に次の行

に切り替わる.

  

    

      
Hello World
    
    

      
Hello World
    
    

      
Hello World
    
    

      
Hello World
    
  

.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を設定することが重要です.そうしないと、要素は指定ではなく幅を分割する方法を採用します.
2つ目は、columnsの補助クラスis-multilineを与えた.is-multilineの役割はflex-wrap:wrapを設定することである.このアトリビュートがない場合、12列の幅を超えると、これらの列は下に移動せず、右に延長されます.
3.要素が本来の幅を占める

  

    

      
Hello World
    
    

      
Hello World
    
    

      
Hello World
    
  

.columns{
  display: flex;
}

.column {
  flex: 1
}

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

ここでは,要素の本来の幅のみを占めることを望むcolumnの補助クラスis-narrowを与える.flex:noneというプロパティが設定されています.そうしないと、メタの3つの要素が行全体の幅に分割されます.is-narrowクラスを追加すると、前後の2つの要素が本来の幅を占め、中間の要素が残りの幅を占めます.
リファレンス
Laracasts