質問: Flexboxの練習のために、カエルを動かすサイトで学習していて分からなくなりました。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/d5bb62d5a77045245ea96db01038c4c3.png) ゲーム概要 カエルを所定の蓮子の葉に乗るように動かせばクリアになる。 緑、赤のカエルは乗せられたのですが、黄色いカエルの乗せ方が分からないです。 どう書けばいいですか?
回答: 質問文の画像の時点から正解へ辿り着くまでに行わなければならないことは、以下の 2 つです。 1. 黄色いカエルを flex コンテナの左端に配置し、緑、赤色のカエルは flex コンテナの右端に配置する。 2. 黄色いカエルを flex コンテナの画面縦方向に中央寄せする。 1 つ目は、 flex コンテナ内での余白の配分方法を設定することが出来る`align-content`プロパティを使うことで実現できるとわかります。また、 2 つ目は主軸、もしくは交叉軸での flex アイテムの配置方法を設定することが出来る`justify-content`プロパティ、`align-items`プロパティのどちらかを使えば良いとわかります。今回の場合、画面縦方向は**主軸**となっているため、`justify-content`プロパティを使えば良いとわかります。 以上のことから、質問者さんの実現したいことは以下のように行うことが出来ます。 ``` #pond { display: flex; flex-flow: column-reverse wrap-reverse; align-content: space-between; justify-content: center; } ```