特に自分がそのように思っていたのですが、Flexboxはレイアウトを組む際に非常に便利なものではあるのですが、非対応のブラウザをサポートする必要があるために安易に使用できなかったり、仕様がころころ変わって対応してたとしてもブラウザによって様々な書き方をする必要があったりで、本格的に使うのはまだしばらく先にとかもう少し様子を見ようと思ってた人も少なくないと思います。
ただ、最近では以前に比べて記述する内容も減り、対応していなかったブラウザもサポートを切る機会が多くなったりと今後ますます利用する場面が増えそうなので、先述したようにFlexboxについて勉強したい方やより理解を深めたいという時に参考になると思うエントリーやサイトをまとめてみました。
全体的に英語のエントリーなどが少し目立ちますが、Google翻訳などを使えば大体の内容は理解できると思います。
November 16, 2017 追記
- 「Flexboxを利用してよくあるレイアウトを実装したサンプル集」を追記しました。
February 11, 2016 追記
- 「Flexbox Patterns」を追記しました。
December 19, 2015 追記
- 「Test CSS Flexbox Rules Live」を追記しました。
-
CSS Flexible Box Layout Module Level 1
とりあえずここから確認ということで、「W3C」のFlexible Box Layout Moduleについてのページです。 -
flexbox - Can I use... Support tables for HTML5, CSS3, etc
プロパティの各種ブラウザ対応状況を確認できる「Can I use」で、Flexboxについて検索した結果ページです。 -
CSS flexible box の利用 - CSS | MDN
こちらは「MDN」内のFlexboxについての解説ページで、各用語や基本的な例などが図やコード付きでまとめられています。
また、ページ左のナビに各種プロパティへの詳細ページへのリンクがあります。 -
これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス
こちらは「Webクリエイターボックス」さんで公開されているFlexboxについての基礎的な部分について書かれたエントリーで、サンプルソースや実際の表示付きで解説しています。
デモではCodePenを使用しているので、動きの確認はもちろん自身で少し記述を変更してみたりもできます。 -
Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用 | Webクリエイターボックス
同じく「Webクリエイターボックス」さんで公開されているFlexboxについてのエントリーで、こちらもサンプルソースやデモが用意されています。
タイトルにあるようにこちらは応用編といった感じのものになっており、実際に案件等で使用するようなレイアウトを用いて解説されています。 -
2015年10月度のflexboxの書き方 - Web Design Note
タイトルにもあるように2015年10月現在ということで割と最近書かれたFlexboxのエントリーで、各種ブラウザのサポート状況や実際の表示について書かれています。 -
5分でわかるflexbox
こちらはFlexboxについてを解説しているスライドです。 -
Solved by Flexbox — Cleaner, hack-free CSS
グリッド・上下センター・スティッキーフッターなど実際にサイト制作時でもよく作るようなものを、Flexboxを使って実装したサンプルがまとめられています。
和訳:Solved by Flexbox — クリーンでハックのない CSS -
A Visual Guide to CSS3 Flexbox Properties | Scotch
それぞれどのような記述をすることでどのような動きになるのかを視覚的に解説したビジュアルガイドで、非常に分かりやすいので文章やコードじゃいまいちピンとこないという人向けです。
和訳:CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス -
A Complete Guide to Flexbox | CSS-Tricks
こちらは「CSS-Tricks」で公開されているFlexboxについてのガイドエントリーで、どのような記述をすることでどのような配置になるのかわかるイメージも一緒に掲載されています。
また、下記もその他海外デザインブログでのFlexbox関連のエントリーです。 -
What The FlexBox?! - A free 20 video course to learn CSS Flexbox
こちらはこれまでのものと違ったタイプで、動画を使ってFlexboxを説明しているサイトです。
英語ですし視聴する際もメールアドレスが必要になるのですが、気になる人がいるかもしれないので一応ご紹介。 -
Flexbox Grid
Flexboxを使ったグリッドレイアウトを実装できるスタイルシートです。
こういうものはそのまま使うだけでなく、勉強などにも使えますね。 -
Gridlex - Just a Flexbox Grid System
こちらも同じくFlexboxを使ったグリッドレイアウトを実装できるスタイルシートになります。 -
CSS Flexbox :: Article Collection
フロントエンドに関するような情報が沢山まとまっている「HeyDesigner」内にあるFlexboxに関するページです。
やはり英語になりますがちょっとしたツールが紹介されていたり、ここでは紹介していないエントリーなども多数あります。 -
Flexbox Tester · MadebyMike
Flexboxを使用した際にそれぞれどのように幅が計算されているのかを、任意で値を変更したりしながら確認することができます。 -
Flexbox Froggy - A game for learning CSS flexbox
こちらはゲームをしながらFlexboxを学べるというサイトで、それぞれプロパティを記述してカエル達を葉っぱの上に乗せてあげればクリアとなります。 -
Test CSS Flexbox Rules Live
プロパティをラジオボタンで切り替えていくことで、どのような表示になるのかを確認することができます。 -
Flexbox Patterns
タブ・フッター・リスト・カードなど、サイトでよく使われるレイアウトやパーツをCSSのFlexboxを使った実装例としてまとめているサイトです。 -
Flexboxを利用してよくあるレイアウトを実装したサンプル集
当ブログで書いたFlexboxを使ってよくあるレイアウトを実装したサンプルまとめで、全12パターンの使い方を紹介しています。