「Flexbox Froggy」というCSS flexboxを学ぶのに最適なゲームがあります。
- インストール・登録不要
- 超初心者向け（入門LV）
- 全24問
- 20分～60分くらいでサクッとできる
ということで、Flexboxに自信がない人は、暇つぶしにやってみるのがオススメです。
目次
Flexbox Froggyの回答例まとめ
Flexbox Froggyの回答例まとめです。
Flexbox Froggyの回答例【LV1】
justify-content:flex-end;
Flexbox Froggyの回答例【LV2】
justify-content:center;
Flexbox Froggyの回答例【LV3】
justify-content:space-around;
Flexbox Froggyの回答例【LV4】
justify-content:space-between;
Flexbox Froggyの回答例【LV5】
align-items:flex-end;
Flexbox Froggyの回答例【LV6】
justify-content:center;
align-items:center;
Flexbox Froggyの回答例【LV7】
justify-content:space-around;
align-items:flex-end;
Flexbox Froggyの回答例【LV8】
flex-direction:row-reverse;
Flexbox Froggyの回答例【LV9】
flex-direction:column;
Flexbox Froggyの回答例【LV10】
flex-direction:row-reverse;
justify-content:flex-end;
Flexbox Froggyの回答例【LV11】
flex-direction:column;
justify-content:flex-end;
Flexbox Froggyの回答例【LV12】
flex-direction:column-reverse;
justify-content:space-between;
Flexbox Froggyの回答例【LV13】
flex-direction:row-reverse;
justify-content:center;
align-items:flex-end;
Flexbox Froggyの回答例【LV14】
order:2;
Flexbox Froggyの回答例【LV15】
order:-1;
Flexbox Froggyの回答例【LV16】
align-self:flex-end;
Flexbox Froggyの回答例【LV17】
order:3;
align-self:flex-end;
Flexbox Froggyの回答例【LV18】
flex-wrap:wrap;
Flexbox Froggyの回答例【LV19】
flex-direction:column;
flex-wrap:wrap;
Flexbox Froggyの回答例【LV20】
flex-flow:column wrap;
Flexbox Froggyの回答例【LV21】
align-content:flex-start;
Flexbox Froggyの回答例【LV22】
align-content:flex-end;
Flexbox Froggyの回答例【LV23】
flex-direction:column-reverse;
align-content:center;
Flexbox Froggyの回答例【LV24】
flex-direction:column-reverse;
flex-wrap:wrap-reverse;
justify-content:center;
align-content:space-between;
あるいは
flex-flow:column-reverse wrap-reverse;
justify-content:center;
align-content:space-between;
最後のLV24だけ難しかったですね。
【余談】CSS flexboxを学ぶための教材
「ゲームは出来るようになったけど、もう少し勉強するにはどうすればいいですか？」
…という質問を受けたので、いくつか教材を紹介します。
HTML/CSSを勉強するなら、下記の本がオススメ。
他の本に比べてflex-boxのコーディング方法がかなり丁寧に解説されています
初心者よりちょっと上を目指す人向けです。
あるいは、読書が苦手 or 周りに聞ける人がいないなら、動画で学ぶのもあり↓
Flex-froggy作者の他のゲームも面白いですよ↓