ページ内目次

イマドキのCSSレイアウトは Flexbox でしょ

左に寄せたり、右に寄せたりはいまだにfloat:left / right を使うことが少なくないけど、下を揃えたり、スタイルシートで左からと右からの入れ替えしたり、間隔揃えたり…

と、なんだかんだのレイアウトをするなら、もうイマドキFlexbox っきゃない(と思ってる)

しかーし、便利で多機能だけに、どんな値を設定してやるかなかなか覚えられないし、ブラウザによって非対応や見え方が違ってしまう場合もまだあるので、◯◯と◯◯はこれでいいけど、◯◯用にはこう書いてみたいなのがちょっややこしい。

そかなときに頼りになるのがこれらのサイト。

すごくわかりやすく書いてあるので覚えないってのもあるんだけどね(笑)

Flexboxでできることや、基本的な使い方を見てみたいときは

Qiita さんと LIGさんがとにかくわかりやすいです。

Flexboxレイアウトまとめ – Qiita

CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG

がっちり詳しく知りたいときは

A Visual Guide to CSS3 Flexbox Properties を見ると良いです。

A Visual Guide to CSS3 Flexbox Properties

日本語対応のチートシートを配布しているのは

クリエイターボックスさん

日本語対応!CSS Flexboxのチートシートを作ったので配布します

そして極めつけ、各ブラウザ対応のコードを吐き出してくれるのは

flexbox playground and code generator

↑上へまいりま〜す