Flexbox Froggy GameでCSS Flexboxを自分で教える

過去に私達はflexboxとそれがどのように機能するかの基本について詳しく説明しました。しかし、Flexboxをワークフローに実際に適用するのは、CSS仕様に非常に複雑な追加があるため、難しい場合があります。.

Flexbox Froggyを使えば、 カエルとユリパッドを含む楽しいウェブゲームでflexboxのすべての基本を学ぶ. 私はそれがクレイジーに聞こえますが、これは真剣に素晴らしいWebアプリケーションです.

あなたはレベル1から始めて 24の異なるレベルを通してゆっくりとあなたの方法を働きます フレックスボックスの向きのさまざまな側面を教える。初期のレベルはあなたに尋ねることによって簡単に始まります 一つの容器に沿って一つか二つのカエルを並べる. 初期のレッスンには、途中であなたを助けるためのヒントや提案も含まれています.

しかし、レッスン10を過ぎると10のことが本当に熱くなります。あなたはどのようにする方法を学ぶ必要があります-コンテナ内のアイテムを整理する, の仕方 整理する コンテンツ 縦に, そして作り方 等間隔 異なるコンテンツの異なる行の間.

かわいい小さなカエルはあなたを魅了するかもしれませんが、残りはこれがタフなゲームであることを保証します.

しかしながら, 初心者から経験豊富なWeb開発者まで, ゲームはすべてのレベルのために作られています。初期のレッスンはそよ風で、後のレッスンはあなたがあなたの側で髪の毛の塊で画面の上に飛びついたままにすることができます.

完全なゲームのソースコードはGitHubから無料で入手できるので、必要に応じてダウンロードしてローカルで再生できます。.

さらにWebアプリケーションは多言語対応です 20言語を提供 英語、フランス語、ドイツ語、イタリア語、中国語、日本語、ロシア語（およびその他多数）を含む.

私はそれを認めます カエルを並べ替えることはすぐにあなたをマスターにしないでしょう フレックスボックスしかし、これらの教訓は flexboxの構文に慣れる 実社会のシナリオでより快適に作業できるようになります。.

もしあなたが あらゆるスキルレベルのWeb開発者 あなたは間違いなくFlexbox Froggyをチェックするべきです。それは完全に無料で、遊ぶのがとても楽しいし、驚くほど教育的です.