Lv. 1

justify-content: flex-end;

は、カエルを右寄せに配置させます。

justify-contentは左右の位置（水平方向の揃え方）を指定するためのプロパティです。

Lv. 2

justify-content: center;

は、カエルを左右中央に配置させます。

justify-contentは左右の位置（水平方向の揃え方）を指定するためのプロパティです。

Lv. 3

justify-content: space-around;

は、周囲（＝カエルの両側）に間隔を空けてカエルを左右に配置させます。（左側のカエルの左側、右側のカエルの右側にも間隔が空けられて表示されます。）

justify-contentは左右の位置（水平方向の揃え方）を指定するためのプロパティです。

Lv. 4

justify-content: space-between;

は、カエルの間隔を左右に空けて配置させます。（左側のカエルの左側、右側のカエルの右側には間隔は空けられません。）

justify-contentは左右の位置（水平方向の揃え方）を指定するためのプロパティです。

Lv. 5

align-items: flex-end;

は、カエルを上下方向の下の位置に配置させます。（flex-startは上下方向の上、flex-endは上下方向の下にカエルを配置します。）

align-itemsは上下の位置（垂直方向の揃え方）を指定するためのプロパティです。

Lv. 6

justify-content: center;
align-items: center;

は、カエルを左右中央、上下中央に配置させます。

justify-contentは左右の位置（水平方向の揃え方）、align-itemsは上下の位置（垂直方向の揃え方）を指定するためのプロパティです。

Lv. 7

justify-content: space-around;
align-items: flex-end;

は、周囲（＝カエルの両側）に間隔を空けてカエルを左右に配置し、上下方向の下の位置に配置させます。

justify-contentは左右の位置（水平方向の揃え方）、align-itemsは上下の位置（垂直方向の揃え方）を指定するためのプロパティです。

Lv. 8

flex-direction: row-reverse;

は、カエルを文章と逆の向き（右から左の順番）に配置させます。

flex-directionを指定していない段階では、カエルは「緑、黄、赤」と文章と同じ向き（左から右の順番）で並んでいますが、row-reverseの指定によって、カエルは文章と逆の向き（右から左の順番）に配置されます。
flex-directionは子要素の並ぶ向き（並び順）を指定するためのプロパティです。
flex-directionプロパティの値は、左から右、右から左、上から下、下から上の 4種類があります。

Lv. 9

flex-direction: column;

は、カエルを上から下の向き（上から下の順番）に配置させます。

columnという英単語は、列（縦の並び）という意味、したがって、カエルは上から下の向き（上から下の順番）に配置されます。
flex-directionは子要素の並ぶ向き（並び順）を指定するためのプロパティです。
flex-directionプロパティの値は、左から右、右から左、上から下、下から上の 4種類があります。

Lv. 10

flex-direction: row-reverse;
justify-content: flex-end;

は、カエルを右から左の向き（右から左の順番）で、左寄せに配置させます。

rowという英単語は、行（横の並び）、reverseは反対（逆）という意味です。
したがって、flex-directionプロパティの値をrow-reverseにすることよって、カエルは右から左の向き（右から左の順番）に配置されます。
しかし、これだけではカエルは、右寄りで配置されてしまいます。
そこで、justify-contentプロパティの値をflex-endにすることによって、始点と終点が逆になり、最終的にカエルは左寄りに配置されます。

Lv. 11

flex-direction: column;
justify-content: flex-end;

は、カエルを上から下の向き（上から下の順番）で、下寄せに配置させます。

まず、flex-directionプロパティの値をcolumnとすれば、カエルは縦に配置されます。
次に、カエルを下寄せに配置したいので、align-itemsプロパティの値をflex-endとしてしまいがちですが、これではカエルは右寄せになってしまいます。
最後の行は、align-itemsを指定するのではなく、justify-contentをflex-endとするのが正解です。
ポイントは、flex-directionをcolumnとして縦向きに配置したので、通常、横向き（水平方向）を基準にしていた揃え方が、縦向き（垂直方向）に変更になるという点です。
justify-contentは、flex-directionが指定されていない、あるいはrow、row-reverseである場合は、本来、水平方向の揃え方を指定するプロパティです。
しかし、この問題のようにflex-directionをcolumnとして縦向きに配置させると、justify-contentは水平方向ではなく垂直方向の揃え方を指定することになります。
同様にalign-itemsは、本来、上下の位置（垂直方向の揃え方）を指定するプロパティですが、flex-directionをcolumnとして縦向きに配置させていると、align-itemsは垂直方向ではなく水平方向の揃え方を指定することになります。

Lv. 12

flex-direction: column-reverse;
justify-content: space-between;

は、カエルを下から上の向き（下から上の順番）で、上下に間隔を空けて配置させます。

まず、flex-directionプロパティの値をcolumn-reverseとすれば、カエルは縦方向に下から上の順番で配置されます。
次に、カエルを上下に間隔を空けて配置したいので、最後の行でjustify-contentプロパティの値をspace-betweenにします。
この問題は、Lv. 11と同様、先にflex-directionプロパティで、子要素を並べる向きを水平方向ではなく、垂直方向に設定しています。
そうすると、通常、横向き（水平方向）を基準にしていた揃え方が、縦向き（垂直方向）に変更になるという点がポイントです。 space-aroundとsapce-betweenとの違いは、両端にも間隔を空けるか、空けないかの違いです。

Lv. 13

flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;

は、カエルを右から左の向き（右から左の順番）で、左右中央寄せにし、上下位置は一番下に配置させます。

まず、flex-directionプロパティの値をrow-reverseとすれば、カエルは横方向に右から左の順番で配置されます。
次に、カエルを左右中央寄せに配置したいので、justify-contentプロパティの値をcenterにします。
そして最後の行で、上下位置は一番下に配置させたいので、align-itemsプロパティで上下の位置（垂直方向の揃え方）をflex-end（最後）とします。
この問題のように、flex-direction（子要素の並ぶ向き）がrow（初期値）またはrow-reverseである場合は、その方向を基準にjustify-content、align-itemsの値を考えればよいので、設定の仕方が混乱しにくいと思います。

Lv. 14

.yellow {
  order: 1;
}

は、黄色のカエルを一番最後に配置させます。

orderプロパティは、要素の配置される順序を指定します。
orderプロパティの初期値は 0で、orderプロパティを何も指定しなければ、0と指定したのと同じことになります。
例えば、緑や赤のカエルについてはorderプロパティを何も指定していないので、順番通りに緑、赤の順に配置されます。
黄色のカエルはorderプロパティの値を 1にしたので、orderプロパティが 0の要素が全部配置された後に配置され、結果として一番最後に配置されます。
この問題では黄色のorderプロパティの値を 0より大きい値にしておけばよいので、 1のところは 2でも 3でもそれ以上でも正しく配置されます。
黄色のカエルのorderプロパティを 0より小さい値にすると、黄色のカエルを緑のカエルよりも先に配置させることができます。

Lv. 15

.red {
  order: -1;
}

は、赤色のカエルを一番最初に配置させます。

赤色のカエルはorderプロパティの値を -1にしたので、orderプロパティが 0の要素よりも先に配置され、緑のカエルよりも前に配置されます。
この問題では赤色のorderプロパティの値を 0より小さい値にしておけばよいので、 -1のところは -2でも -3でもそれ以下でも正しく配置されます。

Lv. 16

.yellow {
  align-self: flex-end;
}

は、黄色のカエルを本来配置される位置ではなく、垂直方向の一番下の位置に配置させます。

この問題では、親要素（id="pond"の要素）でalign-itemsプロパティの値をflex-startとしているので、池の中のカエルは垂直方向の上の位置に配置されます。
しかし、黄色のカエルについては、align-selfプロパティをflex-endに設定してあるので、垂直方向の下の位置に配置されるようになります。 align-selfプロパティの初期値はautoで、align-selfプロパティを何も指定しなければ、autoと指定したのと同じ、すなわち、その要素の親要素のalign-itemsの値によって配置されます。
子要素のalign-selfプロパティが設定されていれば、親要素のalign-itemsでの指定を上書きし、子要素の配置を優先して行います。

Lv. 17

.yellow {
  order: 1;
  align-self: flex-end;
}

は、黄色のカエルを本来配置される位置ではなく、緑のカエルの最後に、そして、垂直方向では一番下の位置に配置させます。

黄色のカエルのorderプロパティを、0より大きくすると、orderプロパティを何も指定していない緑のカエルよりも後に配置されます。
そして、align-selfプロパティの値をflex-startにすると、黄色のカエルだけ垂直方向の一番下の位置に配置されます。

Lv. 18

flex-wrap: wrap;

は、池の中のカエル（黄色のカエル、緑色のカエル 5匹、赤色のカエル）を折り返して配置させます。

flex-wrapは、子要素の折り返しを指定するプロパティです。
flex-wrapの初期値はnowrapで、flex-wrapプロパティを何も指定しなければ、no-wrapと指定したのと同じことになり、子要素は折り返さずに一列に配置されます。
この問題では、flex-wrapのプロパティの値をwrapとすると、親要素からはみ出したところで子要素が折り返され、蓮の葉の上にちょうど配置されるようになります。

Lv. 19

flex-direction: column;
flex-wrap: wrap;

は、黄色のカエル、緑色のカエル、赤色のカエルを上から下の向き（上から下の順番）に、折り返して配置させます。

flex-directionは子要素の並ぶ向き（並び順）を指定するためのプロパティです。
flex-wrapは、子要素の折り返しを指定するプロパティです。

Lv. 20

flex-flow: column wrap;

は、黄色のカエル、緑色のカエル、赤色のカエルを上から下の向き（上から下の順番）に、折り返して配置させます。

Lv. 20では、flex-directionとflex-wrapの二つのプロパティを一行で記述することができるflex-flowプロパティを使います。
ここでは、flex-directionとflex-wrapの二つのプロパティをそれぞれcolumnとwrapと指定したいので、flex-flowプロパティの値をcolumn、半角スペース、wrapと記述します。
この指定方法によって、ひとつ前のLv. 19と全く同じ結果が得られます。

Lv. 21

flex-wrap: wrap;
align-content: flex-start;

は、カエルを複数行にわたって表示させるとき、垂直方向の位置を上側に詰めて配置させます。

align-content は、複数行のときの子要素の垂直方向の位置を指定するプロパティです。

Lv. 22

flex-wrap: wrap;
align-content: flex-end;

は、カエルを複数行にわたって表示させるとき、垂直方向の位置を下側に詰めて配置させます。

align-content は、複数行のときの子要素の垂直方向の位置を指定するプロパティです。

Lv. 23

flex-wrap: wrap;
flex-direction: column-reverse;
align-content: center;

は、まず、一番最後の黄色のカエルが一番最初に配置されるように、カエルを下から上の向き（下から上の順番）で配置します。
そして、それらを左右の中央部分に集まるように配置させます。

flex-directionプロパティの値は、column-reverseにすると、一番最後の黄色のカエルが一番最初に配置されるようになります。
align-contentプロパティの値をcenterとすれば、カエルが左右の中央部分に集まるように配置されます。
このとき、flex-directionプロパティの値はcolumn-reverseにしているので、子要素の配置の向きの基準は、水平方向から垂直方向に変わります。
align-contentプロパティの値はcenterになっていると、本来、複数行に要素を配置したとき、要素ははコンテナーの中央に詰められる（垂直方向の中央に詰められる）という指定ですが、それが垂直ではなく、水平方向の中央に詰められるという意味に変わります。
Lv. 11、Lv. 12、でもflex-directionをcolumn、あるいはcolumn-reverseとすると、「基準の方向が変わる」というのがポイントでした。
今回もこの点について注意して下さい。

Lv. 24

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: space-between;
justify-content: center;

という答えは、以下のように考えれば導き出すことができます。
正解にたどり着くための考え方、各プロパティの記述方法は一通りではなく、何通りかあります。
ここでは、一つの例をご紹介します。

まず、カエルを横ではなく縦に配置させたいので、flex-directionをcolumn、または、column-reverseにする必要があります。
ここで、先頭の赤色のカエルがを先頭のままでは正しく配置できないので、配置の順番が逆になるよう、flex-directionをcolumn-reverseにします。
これで、一番上が黄色のカエルで、一番下が赤色のカエルになり、正解に一歩近づきました。
次に、まだこの段階では、カエルは左側に縦一列に並んだ状態のままなので、これを折り返し表示にさせる必要があります。
折り返しにするには、flex-wrapプロパティをwrapかwrap-reverseにする選択肢がありますが、wrap-reverseにすれば、赤と緑のカエルは右側の列に全て正しく配置されるようになります。
これで、もう一歩、正解に近づきました。
残りは、 2匹の黄色のカエルを左側の列に寄せて、上下（垂直方向）の中央に配置すれば完成できます。
そこで、左右の子要素の間隔をぐっと空けるために、space-betweenを使います。
space-betweenはjustify-content、align-contentのどちらでも設定できますが、どちらを使うのが正しいでしょうか？
前の問題でもポイントになっていたことを思い出して下さい。
それは、flex-directionをcolumn-reverseに設定すると、子要素の配置の向きの基準が、水平方向から垂直方向に変わることでした。
カエルを右端と左端に寄せて間隔を空けるには、本来、垂直方向に間隔を設定するプロパティalign-contentを使います。
これでほとんど最終回答に近くなりました。
最後に、上下（垂直方向）で中央寄せにすればよいので、本来、水平方向の揃え方を設定するjustify-contentプロパティの値をcenterにすれば、完成です
注意点としては、右側の列のカエルの配置は何も変わりません。
右側の列のすでに正しい形で蓮の葉の上に乗っている赤と緑のカエルは、justify-contentプロパティの値をcenterにしても、子要素の間隔がすでに正しく空いているので、中央寄せにしても同じ配置になります。