1. Flexbox とは
Flexboxは、CSSで行うHTML要素の配置を短い記述で簡単に行うことのできる方法のひとつです。
以前はWeb上で文字列、画像等を整然と配置するには、しばしば複雑な記述やテクニックが必要でした。
しかし、最近ではほとんどの新しいブラウザでFlexboxを利用することができるようになってきました。
今後は、それほど細部の調整にこだわらない場合、記述がシンプルなFlexboxを積極的に利用するのがよいと思います。
2. Flexbox Froggy とは
Flexbox Froggyは Thomas H. Park氏が中心に開発、提供しているWeb上の無料学習アプリです。
池の上のカエルを整然と配置させるには、どのようにCSSを記述したらいいのか、ゲーム感覚で学んでいくように構成されています。
日本語版 Flexbox FroggyのURL： Flexbox Froggy（日本語版）
ご家庭でお子さんと一緒にFlexbox Froggyで学習する際は、是非まず初めに、出てくる英単語の意味、使い方を噛み砕いて教えてあげて下さい。
Flexboxでは、start、space、center、betweenなど、英語を母国語にしている子どもたちにとっては、幼稚園から小学校低学年で学ぶような基本的な言葉が使われます。
ちょうどお子さんの英語の勉強にもなると思いますので、一緒にやってみて下さい。
3. Flexboxを使った要素配置の具体例
Flexboxを利用した要素の配置の方法を具体的な例で説明します。
画面上に大きな池がひとつあるとして、その中に例えば 6匹のカエル（箱）を並べるとします。
すると、まず、HTMLは以下のように記述します。
HTMLに関しては、要素、id、class属性、要素の親子関係について正しく理解していることがポイントです。
続いて、CSSは以下のように記述します。
div要素、id、class属性、セレクタに関して、もし、定義、使い方がわからなかったら、HTML、CSSの基礎に関する書籍に解説がありますので、それらを参照して下さい。
上記のHTMLとCSSを使って文書を画面上に表示させると、以下のようになります。
上記のCSSの中で、display: flex; 以下の3行をいろいろ書き換えてみると、子要素の配置が変わります。
Flexbox Froggyでは、このような要素の配置をWeb上で簡単に試行錯誤することができます。
不正解の記述をした場合でも、それらの全てについて要素の配置がどう変わるのか、試してみると理解が深まると思います。
4. Flexbox Froggy 解答例
Flexbox Froggy の解答例を以下に掲載しましたので、よろしければ、ご参照下さい。
Flexbox Froggy（問題 1 - 24 ）の解答例： Flexbox Froggy 解答例
5. CSS関連の新しい技術
文書のレイアウト設定（要素の配置）を従来よりも比較的シンプルでわかりやすく記述するには、Flexbox以外にもCSS Grid Layout（グリッドレイアウト）、Bootstrapなどがよく利用されるようになってきました。（今後も更に様々な手法が進化していくと思われます。）
CSS Grid Layout（グリッドレイアウト）を使うと、高さ、幅の異なるWebページなどの段組みを、従来よりも簡単に設定できます。
Flexbox Froggyの姉妹サイト
Grid Garden ： Grid Garden（日本語版）
では、様々なCSS Grid Layout（グリッドレイアウト）を学ぶことができます。（無料で利用可）
Grid Gardenは、Flexbox Froggy同様、子どもでも親しみやすいよう、畑の中のニンジンを育てるという構成になっています。
参考情報へのリンク：