エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

Flexbox Floggyの回答まとめ。CSS flexboxを学ぶのに最適なゲーム【初心者向け】

「Flexbox Froggy」というCSS flexboxを学ぶのに最適なゲームがあります。

  • インストール・登録不要
  • 超初心者向け(入門LV)
  • 全24問
  • 20分~60分くらいでサクッとできる

ということで、Flexboxに自信がない人は、暇つぶしにやってみるのがオススメです。

flexboxfroggy.com

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だけ難しかったですね。