ゲームでFLEXBOXを学ぶ

FLEXBOXについてゲーム感覚で学習ができます。CSSコードを書いてカエルたちを、蓮の葉まで連れていくゲームです。

justify-contentやflex-directionなど、以下プロパティが登場します。
組み合わせての問題もあり、最後まであっという間にやってしまいました。
FLEXBOXを使う際はよく見てしまうサイトです。

子供がプログラミングができるようになったら、やって欲しい！

• justify-content：コンテナー内のアイテムを水平に並べる
• align-items：コンテナー内のアイテムを垂直に並べる
• flex-direction：コンテナー内のアイテムを並べる方向を決める
• order：コンテナー内の個別アイテムのみ順番を変える
• align-self：コンテナー内の個別アイテムのみ垂直に並べる
• flex-wrap：コンテナー内のアイテムを1列とするかか行するか決める
• flex-flow：flex-directionとflex-wrapをまとめたプロパティ
• align-content：コンテナー内の縦軸に対する間隔を決める