[CSS] Flexbox Froggy – ゲームしながらFlexboxの挙動を学べるサイト
ゲームをしながらFlexboxの挙動を学べる教育系コンテンツ。ルールは簡単で、カエルをハスの葉の上にピッタリ乗るようにFlexboxのプロパティ記述をするというもの。画面左、#pondと指定されているものがいわゆるFlexboxコンテナーです。んでハスの葉は固定で、カエルがFlexboxアイテムという感じ。最初はjustify-content、次にalign-itemsと来て、さらにflex-directionと続きます。全部で24問あり、一通りプレイし終えた頃にはFlexboxが使えるようになってるという内容。TableレイアウトからCSSによるFloatレイアウトに移行した時もそうだったけど、Flexboxでのレイアウトって経験者ほど頭の切り替えが難しかったりするので、こういうコンテンツは楽しく学べて良いですな。