現在のCSSレイアウトの主流、「display:flex」をflex-froggyでゲーム感覚でおさらいする

CSSによるレイアウト組みでとても便利なフレキシブルボックス

CSSでカラムレイアウトを組むにあたって、かつてはfloatで左寄せ・右寄せしたり、その後登場したdisplay:tableのプロパティで表組的にレイアウトできるようになったりと、ここ数年でその実装方法もどんどん進化してきましたが、2018年現在だとカラムレイアウトなどを組み立てるのに一番便利なのはdisplay:flex、フレキシブルボックスです。

特にWordpressで構築されたサイトなどでよく見られるカード型レイアウトなんかとすごく相性もいいようで。

めちゃくちゃ古いブラウザを除けば、下図のモダンブラウザでは全て対応しているといってもいいような状態になってます。Can I use（https://caniuse.com）でも98％近く（2018年2月現在）が使用可能という結果になっていました。

…というわけで、これからのレイアウト組みではフレキシブルボックスを積極的に使っていかないとですね。

一昨年後半あたりからサイト制作にあたって実際に使用するようになったんですが、プロパティ名やその役割などをまた覚えるのがなかなかムズくて(笑)、いちいちマニュアル本覗いたりのまどろっこしさだったんですが、海外の解説サイト見て知ったこのflexの各種のプロパティをゲーム感覚で学べるサイトが面白かったので備忘録を兼ねてご紹介です。

ゲームでflex boxを学べるFlexbox Froggy

このサイトです。

Flexbox Froggy(日本語版）

画面右半分にいるカエルちゃんを指定された葉っぱに移動して乗っけてあげればOK！という単純なルール。日本語版も公開していただけてます。
左側に空欄としてあけてくれているスペースに、「プロパティ：値;」の形式でCSSを追加して、ボックスに相当するカエルちゃんを移動するわけです。

もっともよく使うプロパティjustify-contentやalign-itemsなどのプロパティから始まってorderやalign-selfなどのちょっと高度なプロパティまで全24問を解いていけばflexboxのプロパティをひととおり理解できる！ってことですね。

答えが間違ってると画面がグリグリっと動くだけでカエルちゃんは移動してくれません。
24問目は集大成的に4つのプロパティを上手く使い分けてみましょうって問題になってます。

既にdisplay:flexなんてマスターしてるよ♪って人も、腕試し的に遊んでみられてはいかがでしょうか？(^^♪

ちなみに正解集とかはないみたいですね。
ネタバレになっちゃいますが、最終24問目だけ答え書いとくと…

justify-content:center;
align-content:space-between;
flex-direction:column-reverse;
flex-wrap:wrap-reverse;

…と、こんな感じです。