Flexboxについて理解を深めたいという時に参考になるエントリーやサイトをまとめてみました。最近では以前に比べて記述する内容も減り、対応していなかったブラウザもサポートを切る機会が多くなってきたりと今後はより使う機会が増えてくると思うので、いまいち理解できていないという人はここで紹介しているものを参考にしてみてください。

自分がそのように思っていたのですが、Flexboxはレイアウトを組む際に非常に便利なものではあるのですが、非対応のブラウザをサポートする必要があるために安易に使用できなかったり、仕様がころころ変わって対応してたとしてもブラウザによって様々な書き方をする必要があったりで、本格的に使うのはまだしばらく先にとかもう少し様子を見ようと思ってた人も少なくないと思います。
ただ、最近では以前に比べて記述する内容も減り、対応していなかったブラウザもサポートを切る機会が多くなったりと今後ますます利用する場面が増えそうなので、先述したようにFlexboxについて勉強したい方やより理解を深めたいという時に参考になると思うエントリーやサイトをまとめてみました。
全体的に英語のエントリーなどが少し目立ちますが、Google翻訳などを使えば大体の内容は理解できると思います。

また「CSS-Tricks」だけでなく、ご存知の方も多いと思う「Codrops」や「Smashing Magazine」といったその他の海外のデザインブログでもFlexboxについて以下のようなエントリーが公開されています。
全て英語ではありますがデモ付き、ビジュアル付きなものも多く、Google翻訳等を使えば内容は大体わかると思います。

以上、Flexboxについて勉強したい・理解を深めたい時に参考になるエントリーやサイトのまとめでした。
沢山紹介してきましたがもちろん基本的な部分は同じようなことが書かれているので、これから勉強するという人は幾つか流し読みするなどして自分で理解しやすそうなものを見つけるのが良いと思います。

ただ、どうしても古めのエントリーは必要以上に記述がされていたり、逆に直近のものだと少し前のバージョンに対応していないなんてこともあるとは思うので、それは対応ブラウザの確認や「Can I use」などを利用するなどして注意してください。

Back to Top