Flexboxベースのレイアウトを実装できるCSSフレームワークまとめ

Tips

Flexboxベースのレイアウトを実装できるCSSフレームワークまとめ

レイアウト(特にグリッドレイアウト)を作っていく上で、Flexboxを利用して且つ手軽に実装したいというときに便利なCSSフレームワークをいくつかご紹介します。
Bootstrapのようにレイアウトに限らず様々なコンポーネントまで用意されているものもあれば、Flexboxを使ったグリッドレイアウトの実装のみに特化したシンプルなものまでいろいろありますが、全体的に適用したい箇所にクラスを付与するだけと簡単に利用できるものになります。

Bootstrap

Bootstrap

いまや定番といえるCSSフレームワークのひとつでご存知の方も多いBootstrapは、バージョン4からFlexboxを用いたグリッドシステムが利用できるようになりました。
使用方法も下記にあるようにこれまでのグリッドシステムを使用するときと同じような感じで使えるので、今までBootstrapを利用してきた人であれば尚更楽に導入できると思います。
また、その他コンポーネントやユーティリティも豊富に揃っており、人気のあるCSSフレームワークなので少し検索するだけで導入からちょっとしたカスタマイズ情報まで沢山出てくるのも特長です。

使用例:グリッド

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6"> ... </div>
<div class="col-xs-12 col-sm-6"> ... </div>
</div>
</div>

使用例:垂直方向の整列

上揃え・中央揃え・下揃えといった垂直方向で整列させたいときの使用例

<div class="container">
  <div class="row">
    <div class="col-xs flex-xs-top"> ... </div>
    <div class="col-xs flex-xs-middle"> ... </div>
    <div class="col-xs flex-xs-bottom"> ... </div>
  </div>
</div>

Bulma

Bulma

Bootstrapと同様に様々なエレメントやコンポーネントも用意されているCSSフレームワークで、鮮やかなカラースキームも特長です。
シンプルなグリッドレイアウト以外にPinterestライクなタイルレイアウトを実装することもできます。

使用例:グリッド

<div class="columns">
  <div class="column"> ... </div>
  <div class="column"> ... </div>
  <div class="column"> ... </div>
  <div class="column"> ... </div>
  <div class="column"> ... </div>
</div>

使用例:Pinterestのようなタイルレイアウト

<div class="tile is-ancestor">
  <div class="tile is-vertical is-8">
    <div class="tile">
      <div class="tile is-parent is-vertical">
        <article class="tile is-child notification"> ... </article>
        <article class="tile is-child notification"> ... </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child notification"> ... </article>
      </div>
    </div>
    <div class="tile is-parent">
      <article class="tile is-child notification"> ... </article>
    </div>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification"> ... </article>
  </div>
</div>

Basis

Basis

上で紹介した2つとは違い、余計な装飾やコンポーネントを削減したシンプルな作りのCSSフレームワークです。
削減されたといってもよく使われると思うものはひと通りありますし、例えばBootstrapを使っても結局コンポーネントやカラー部分で大きく手を入れたりするというぐらいだったら、いっそのことこういったシンプルなものをベースに調整した方がいろいろやりやすいと思います。
その他Sass(SCSS)やgulpを普段から利用している場合は特にカスタマイズなどがしやすいとかCSS設計にFLOCSSを採用しているといった特長もあります。

使用例:グリッド

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

使用例:垂直方向の整列

垂直方向で中央揃えさせたいときの使用例

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

Flexbox Grid

Flexbox Grid

その名の通り、Flexbox用いたグリッドシステムを実装できるシンプルなフレームワークです。
コンポーネントなどは必要なく、Flexbox使ったグリッドを実装したいだけというときに良いと思います。

使用例:グリッド

<div class="row">
  <div class="col-xs-12 col-sm-3 col-md-2 col-lg-1">
      <div class="box-row"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-8 col-lg-10">
      <div class="box-row"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-3 col-md-2 col-lg-1">
      <div class="box-row"> ... </div>
  </div>
</div>

使用例:水平方向の整列

均等な間隔で整列させるjustify-content: space-between;の使用例

<div class="row between-xs">
  <div class="col-xs-2">
      <div class="box"> ... </div>
  </div>
  <div class="col-xs-2">
      <div class="box"> ... </div>
  </div>
  <div class="col-xs-2">
      <div class="box"> ... </div>
  </div>
</div>

Gridlex

Gridlex

こちらもFlexbox用いたシンプルなフレームワークです。
余計なものは必要ない、カスタマイズする前提でシンプルなものを探しているという人にはピッタリです。

使用例:グリッド

<div class="grid">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

使用例:水平方向の整列

justify-content: center;justify-content: flex-end;の使用例

<div class="grid-3">
  <div class="col"> ... </div>
</div>
<div class="grid-3-center">
  <div class="col"> ... </div>
</div>
<div class="grid-3-right">
  <div class="col"> ... </div>
</div>

Grd

Grd

最後もシンプルで軽量なのが特長のフレームワークで、余計なコンポーネントなどは必要ない人向けです。
紹介サイト下部にセレクトを切り替えることでリアルタイムに見栄えを確認できるようになっており、目的の見栄えになったらそのときにセレクトで表示(選択)されているクラスを親要素に記述すればその見栄えを実装できます。

使用例:グリッド

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

使用例:水平方向の整列

均等な間隔で整列させるjustify-content: space-between;の使用例

<div class="Grid -between">
  <div class="Cell -4of12"> ... </div>
  <div class="Cell -4of12"> ... </div>
  <div class="Cell -4of12"> ... </div>
</div>

以上、簡単にFlexboxベースのレイアウトを実装できるCSSフレームワークのまとめでした。
いくつか紹介してきましたが、先述したようにレイアウトに限らず様々なコンポーネントまで含まれているものもあれば、レイアウトを作るのに必要最低限の記述のみで構成されているシンプルなものもあったりと、単にフレームワークといっても様々なタイプがあるので、時間に余裕があるときにいくつか試して自分にしっくりくるものを見つけたり、案件によって上手く使い分けできるようにしておくと制作時間の短縮にも繋がると思います。
また、いっそのことこれらを参考にして、自分だけのオリジナルフレームワークを作ったりしても良さそうですね。

ちなみに、上で紹介してきたものはほんの一部で、同じようにFlexboxを採用しているフレームワークは他にも沢山あります。
その他のフレームワークとして以下にいくつか挙げておくので、上で紹介してきたものではしっくりこなかった人や他のフレームワークも気になるという方はチェックしてみてください。

Close the search window,
please press close button or esc key.