Flexboxを使ってアイテム（黄色いカエル）を動かしたい

Question

Flexboxの練習のために、カエルを動かすサイトで学習していて分からなくなりました。

ゲーム概要
カエルを所定の蓮子の葉に乗るように動かせばクリアになる。

緑、赤のカエルは乗せられたのですが、黄色いカエルの乗せ方が分からないです。
どう書けばいいですか？

Answer 1

質問文の画像の時点から正解へ辿り着くまでに行わなければならないことは、以下の 2 つです。
0. 黄色いカエルを flex コンテナの左端に配置し、緑、赤色のカエルは flex コンテナの右端に配置する。

1. 黄色いカエルを 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;
}

Comments

[Akaho]

ありがとうございました。
解決できました。