Flexbox Froggy

(flexboxfroggy.com)

2 ポイント投稿者 GN⁺ 2023-10-01 | 1件のコメント | WhatsAppで共有

CSSコード学習を支援するゲーム「Flexbox Froggy」の紹介記事
justify-content プロパティを使ってカエルをスイレンの葉へ導くゲーム
justify-content プロパティは、コンテナ内のアイテムを水平方向に整列
このプロパティは、flex-start（アイテムを左揃え）、flex-end（アイテムを右揃え）、center（アイテムを中央揃え）、space-between（アイテム間を均等間隔）、space-around（アイテムの周囲を均等間隔）など、複数の値を取れる
justify-content: flex-end; がカエルを右に移動させる例を紹介
Codepipが作った「Flexbox Froggy」ゲームで、GitHubとTwitterへのリンクも掲載
CSS Gridを学びたい人には「Grid Garden」を勧める記事

1件のコメント

GN⁺ 2023-10-01

Flexbox Froggy に関する記事。CSSを学ぶためのゲーム
ユーザーがCSS学習向けの類似ゲームとして、cssgridgarden.com、cssbattle.dev、flukeout.github.io、そして css-animations.io を推薦
align-content や align-items のような flex のプロパティを覚えるのが難しいという声があり、USBケーブルを逆向きに挿してしまうよくある問題になぞらえている
CSS Grid と、それが提供するレイアウトの選択肢を称賛するユーザーたち
Flexbox Froggy のようなゲームを通して多くを学んだと共有するユーザーたち
flexbox の全プロパティを覚えるのに苦労する人向けに、ユーザー作成のチートシート darekkay.com/flexbox-cheatsheet
ユーザーたちは、flexbox の知識を思い出すのに Flexbox Froggy が特に役立つと感じている
カエルを 3x3 グリッドにドラッグ＆ドロップすると、出力として flexbox の CSS コードが得られる機能を提案するユーザー
CSSを読むことにより重点を置いた別のゲームとして、guess-css.app が推薦されている
flexbox に関する体験を語るユーザーたち。order プロパティを学んだ人もいれば、justify-content と align-items の命名の違いに混乱を示す人もいる
CSSを楽しく学ぶ方法として、flexboxzombies.com も推薦されている