「FLEXBOX FROGGY」にてCSSのflexboxをゲーム感覚で学習できた
「FLEXBOX FROGGY」のサイトは、画面に表示されたカエル達を、CSSコードを書いて助けてあげるゲーム。
数日前にflexboxの「justify-content」を使った学習をしてたのでゲーム感覚で復習ができて楽しかった。
「justify-content」は、以下の構文のようにアイテムを中央・右寄せ・左寄せなど配置する位置を指定できるCSSコード。
/* 位置による配置 */
justify-content: center; /* アイテムを中央に寄せる */
justify-content: start; /* アイテムを先頭に寄せる */
justify-content: end; /* アイテムを末尾に寄せる */
justify-content: flex-start; /* フレックスアイテムを先頭に寄せる */
justify-content: flex-end; /* フレックスアイテムを末尾に寄せる */
justify-content: left; /* アイテムを左端に寄せる */
justify-content: right; /* アイテムを右端に寄せる */
このFlexbox Froggyのおかげで、このようなサイトをどのように作ってるのかも検証できたのでありがたかった！
