CSS3のFlexboxプロパティを視覚的に確認できるFlexbox playground

floatでの要素流し込みとclearfixを駆使したデザインに慣れ親しんでいる皆さん、こんにちは。

WindowsのサポートとIEの自動バージョンアップ、スマホ環境の台頭により、モダンな環境での開発が進んでいます。古いIEを考慮しなければCSS3を使ったデザインは十分に実用に耐えうるレベルになってきました。

今までは要素を並べる際にはfloatで流し込み、以降の要素が流れ込まないようにclearプロパティを組み合わせる方法が主流でしたが、CSS3のflexboxを使うことでシンプルかつ共通のデザインを実現できるようになります。

現在のブラウザ別flexboxの対応状況は以下の通り。

CSS3のブラウザ別flex対応状況

IEも11のシェアが大半を占めており、今後はEdgeの利用も増えることが予想されるため新規開発では積極的に取り入れていくことが出来そうです。

Flexbox playground

Flexboxには整列規則や順序、どこを起点にするか等を指定するいくつかのプロパティが用意されています。

希望のレイアウトを実現するためには複数のプロパティを組み合わせる必要が出てきますが、それらを視覚的に確認できる「Flexbox playground」を紹介します。

See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.

各プロパティの関係が非常に分かりやすく、今までfloatをメインで使っていてイマイチ勉強が進まなかった人もこれを見て導入への参考になればと思います。

環境によってはまだベンダープレフィックスが必要なプロパティもあるので、使用時には想定環境に合わせてそちらも併記するようにしてください。