Tableレイアウト、floatレイアウトを経て、Web開発者たちに大きな衝撃を与えたのが、*「Flexbox」*という存在です。

Flexboxは名前の通り可変のボックスで、コンテンツのレイアウトをデバイスのディスプレイサイズに応じて柔軟に対応させることができます。そのため、レスポンシブレイアウトが流行していた当時は非常に革新的な存在として注目を集めました。

時を経て、CSSグリッドも従来のレイアウト手法が持つ問題点の多くを克服して登場しました。しかし、今もなおFlexboxが便利なので使い続けている人も多いのではないでしょうか。

そこで今回は、FlexboxとCSSグリッドで使える便利なリソース10選をご紹介します。どれも便利なものばかりなので、気に入ったものがあればブックマークしておきましょう。

あなたはFlexbox派？CSSグリッド派？

flx.jpg
イメージ画像 / stock.io

Flexboxだけでなく、CSSグリッドも実用段階に入ったので、CSSグリッドを使いはじめている人も増えてきました。しかし、そもそもFlexboxとCSSグリッドは設計思想が異なるので、単純にFlexboxがCSSグリッドの代替となる、と簡単に言い切ることは難しいでしょう。

現時点では、Webデザインでワイヤーフレームを構築する際に、Flexboxを使う人とCSSグリッドを好んで使う人に別れるでしょう。それぞれに利点があるので、今回はそれぞれに便利なリソースをご紹介していきます。

参考：
グリッドレイアウトと他レイアウトメソッドとの関係 - CSS | MDN

Flexbox好みなあなたにオススメの5つのリソース

1. Sassで思いっきりカスタマイズできるFlexboxライブラリ「Cyanotype」

11.png

Cyanotypeは、カスタマイズ可能なSassベースのFlexboxライブラリです。「flex-pad」や「flexible-container」といった、標準では用意されていない便利なmixinを使うことで、柔軟にカスタマイズすることができます。

設定できる数が多い訳ではありませんが、軽量で、コードも書きやすいように工夫されています。Sassを普段からお使いの人にはオススメのライブラリです。

2. 遊びながらFlexboxが学べる「Flexbox Froggy」

12.png

Flexbox Froggyは、Flexboxに関するCSSコードを書くことで「カエル」を助けてあげるゲームです。たった1行のコードを完成させる問題が24問続きますが、これらを解くことで結果的にFlexboxの基礎はマスターすることができます。

このゲームを通して、例えば「justify-content: space-between;」と「justify-content: space-around;」の違いなど、初心者がつまずきやすいところを、楽しみながら理解することができるでしょう。よく使う上下左右中央揃えも早期に解決できます。

3. 基本的なプロパティの挙動を学べる「Flexibility」

13.png

Flexibilityは、Flexboxでよく使われる基本的な4つのプロパティの挙動を確認することができるWebサイトです。

ここでは、「align-items」「flex-direction」「flex-wrap」「justify-content」の4つが見た目にどのような影響を与えるかを確認することができます。ウィンドウのサイズを動かすことで、それぞれのアイテムがどのように移動するのか、確認してみるといいでしょう。

4. Flexboxを活用した12グリッドのフレームワーク「Ginger」

14.png

Gingerは、Flexboxを活用して作成された、軽量な12グリッドのCSSフレームワークです。

GingerでもSassが活用されているので、初期設定としていくつかの値を変更すれば、全てのプロパティに変更を適用できます。もちろんブレイクポイントもニーズに合わせて変更することも可能です。

5. 日本語にもしっかり対応「CSS Flexbox チートシート」

15.png

CSS Flexboxチートシートは、Webクリエイターボックスで配布されている、日本語で書かれているFlexboxのチートシートです。チートシートとはいわゆる「カンニングペーパー」のことで、逐一リファレンスをチェックしなくとも1枚で大体のことがわかるように書かれていることがほとんどです。

「flex-shrink」や「flex-order」など、使用頻度がそれほど高くないけれどいざという時に知りたい情報も、しっかりとまとめられています。Webクリエイターボックスのニュースレターに登録することで、PDFファイルをダウンロードすることもできます。