Flexboxでグリッドデザインを実装できるCSSフレームワーク15選

更新日: 2018年05月25日

CSSでよく使うコンポーネントをフレームワークとしてまとめているCSSフレームワーク。
その多くは、レスポンシブに対応した機能も標準対応しているので非常に便利です。

そうしたCSSフレームワークの中でも、レイアウトにFlexboxを使用したモダンなフレームワークが次第に増えてきました。

また、古いIE（インターネットエクスプローラー）のサポートの打ち切りや、主要ブラウザがCSS3の機能の多くをサポートしているので、Flexbox（フレックスボックス）を使う機会も多くなってきました。

そこで今回は、Flexbox対応のCSSフレームワークをまとめてご紹介していきます。

Flexboxを使えば段組が簡単になりますが、さらにCSSフレームワークを使うことで、Flexboxの基本的な設定もすでに組み込まれているので非常に便利です。
それぞれに特徴があるので、ぜひ自分にあったCSSフレームワークを見つけてみてください。

参考：
今さら聞けない！Webデザインの定番とも呼べるレイアウト方法「グリッドレイアウト」の基本｜ferret
インターネットエクスプローラー｜ferretマーケティング用語辞典
　　

Flexboxとは

Flexboxとは、正式にはCSS Flexible Box Layout Moduleと呼ばれるもので、今までtableタグやfloatプロパティなどを使ってきた面倒なレイアウトとは違って、簡単にレイアウトが組めるようになったプロパティや考え方のことです。

tableやfloatを使うと、横並びの際にレイアウトが崩れたり、ブラウザによって表示が上手くいかないというケースも出てきます。
Flexboxを使うことで、CSS側でシンプルな記述で横並びにさせたり、簡単に並べ方を変更することが可能です。

最近のCSSフレームワークでは、Flexboxを使ってレイアウトを組めるようになったものがだんだんと多くなってきました。

また、CSSフレームワークの多くはMediaQueryを使ったレスポンシブ対応のデザインが組めるので、自分でFlexboxを用いてレイアウトを組むよりもフレームワークを使ったほうが簡単かつ自在に段組みができるようになります。

それでは、実際にFlexboxに対応したCSSフレームワークをご紹介しましょう。
　　

Flexbox対応のCSSフレームワーク

1. Bootstrap

http://v4-alpha.getbootstrap.com

Twitterから登場したBootstrapは、現在最も人気のあるCSSフレームワークの1つです。
CSSのプリプロセッサであるSassにも対応していて、Flexboxだけではなく、ボタンやプログレスバーなどのコンポーネントも非常に充実しています。

また、Bootstrapのテーマを着せ替えることで、さらにリッチな表現をすることも可能です。
　　

2. Bulma

http://bulma.io

Bulmaは、Githubでもスターを12,000弱獲得している人気のフレームワークの1つです。
人気の理由は、ほかのフレームワークにはないシンプルさにあります。

例えば、このように6つのボックスを横並びにしたい時に、以下のコードで簡単に実装できます。

<div class="columns">
　　<div class="column">1</div>
　　<div class="column">2</div>
　　<div class="column">3</div>
　　<div class="column">4</div>
　　<div class="column">5</div>
　　<div class="column">6</div>
</div>

そのほかにも、以下のようなメディアオブジェクトも簡単に実装できたり……

水平方向の段組の横幅調整もシンプルに行えます。
　　

3. Grd

https://1000ch.github.io/grd/

Grdも非常にシンプルなCSSフレームワークです。
Grdでは、親要素のGridと子要素のCellを組み合わせて段組を行います。

<div class="Grid">
　　<div class="Cell -3of12">3of12</div>
　　<div class="Cell -9of12">9of12</div>
</div>

また、上の例のようにダッシュから始まる要素を付加することで、オプションを指定することができます。

例えば、*「-3of12」は12分の3の横幅、「-top」で上揃え、「-right」*で右揃え、といった具合にオプションを指定できます。
　　

4. Basis

http://sass-basis.github.io

Basisでは12グリッドのグリッドシステムを採用しています。
親要素に*「_c-row」、子要素に「_c-row__col」*を指定していきます。

<div class="_c-row">
　　<div class="_c-row__col _c-row__col--1-1 _c-row__col--md-1-3">...</div>
　　<div class="_c-row__col _c-row__col--1-1 _c-row__col--md-1-3">...</div>
　　<div class="_c-row__col _c-row__col--1-1 _c-row__col--md-1-3">...</div>
</div>

Basisのユニークなところは、入れ子構造での段組が簡単に実装できるところです。

このような入れ子構造も組むことができます。
　　

5. Foundation

http://foundation.zurb.com

Foundationも非常に人気のあるCSSフレームワークの1つで、軽量化を目指しており、従来より50％のコードの軽量化に成功しています。

また、最近話題になっているMotion UIにも対応しているので、マイクロインタラクションも簡単に実装することが可能です。

6. Flexbox Grid

http://flexboxgrid.com

Flexbox Gridは、オフセットや入れ子、幅の自動調整などのグリッドに関する豊富な機能を持ったCSSフレームワークです。
ほかのフレームワークと異なり、グリッドに特化した要素に絞ることで軽量化に成功しています。

以下の例のように、親要素にrow、子要素にcol-xxx(xxxは任意のプロパティ)と指定するのが基本です。

<div class="row">
　　<div class="col-xs-12">
　　　　<div class="box">12</div>
　　</div>
</div>

7. INK

http://ink.sapo.pt

INKは、SassとJavaScriptも同梱されている、カスタマイズがしやすいCSSフレームワークです。
「ink-navigation」「horizontal」「column-group」のように、クラス名はできるだけ自然言語に近いように名付けられています。

<div class="ink-grid">
　　<div class="column-group">
　　　　<div class="all-50 small-100 tiny-100">...</div>
　　　　<div class="all-50 small-100 tiny-100">...</div>
　　</div>
</div>

また、INKでは、JavaScriptを使うことでカスタマイズを行うことが推奨されています。

Ink.requireModules(
　　['Ink.Dom.Css_1'],
　　function(Css) {
　　　　var elm = Ink.s('.ink');
　　　　Css.addClassName(elm,'hot');
　　}
);

もちろん、Sassで作られているので、Mixinなどを使って新しく機能を設定することも可能です。
　　

8. Gridlex

http://gridlex.devlint.fr/

Gridlexも、Flexbox Gridなどと同じように、Flexboxによるグリッドレイアウトに特化したCSSフレームワークです。
1段は12カラムで、親要素にgrid、子要素にcol-xxxを指定します。

次の例では、2段表示(12グリッドのカラムと、6＋3＋3＝12グリッドのカラム)で表示されます。

<div class="grid">
　　<div class="col-12">...</div>
　　<div class="col-6">...</div>
　　<div class="col-3">...</div>
　　<div class="col-3">...</div>
</div>

また、marginを無くしてこのようなギャラリーも作成することもできます。

9. Material-UI

http://www.material-ui.com/

Material-UIは、ReactとGoogleのマテリアルデザインに着想を得たフレームワークです。
このうちグリッドレイアウトの機能はほんの一部で、コンポーネントだけでなくマテリアルカラーまで揃っています。

Reactをベースにしているため、JavaScriptの基本を理解していないと使いこなせませんが、機能が豊富で中～上級者は選択肢の1つに入れておきましょう。
　　

10. Pavilion

http://www.pavilion.io

Pavillionはたったの9キロバイトと驚くほど軽量なCSSフレームワークです。もちろんグリッドだけでなくUIパーツも同梱されています。

グリッド部分は上記のようにFlexboxのプロパティを1つずつ足していくように使うこともできるので、Flexboxを扱うことに慣れている方は、Pavillionが一番使いやすいかもしれません。
　　

11. Cutestrap

https://www.cutestrap.com

Cutestrapは、その名のとおりBootstrapにフィーチャーしつつも、8キロバイトという軽量化に成功したCSSフレームワークです。
Cuteの名のとおりピンク色のUIが特徴的です。
Normalize.cssのリセット機能も備えているので、リセット系CSSを別に用意しなくてもいいのは大きなメリットです。
　　

12. Milligram

https://milligram.github.io

Milligramは、驚くべきことにたったの2キロバイトしかない、今回紹介する中でも一番軽量なCSSフレームワークです。
フォームやボタンなどのコンポーネントだけではなく、下記のようにグリッドシステムも同梱されています。

<div class="row">
　　<div class="column">.column</div>
　　<div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
</div>

オフセットを指定することも可能です。