Flexbox Froggy - Lv. 19〜24/24 - コーディング

Flexbox Froggy - Lv. 19/24

flex-directionとflex-wrapを使って、このカエルの大群がきちんと三列に並ぶようにしてあげてください。

#pond {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Flexbox Froggy - Lv. 20/24

flex-directionとflex-wrapの二つのプロパティーはよく一緒に使われます。
そこで、これらを統合するショートハンドプロパティー flex-flowが作られました。
このショートハンドプロパティーは空白文字で分割した二つのプロパティーの値を受け付けます。
例えば、flex-flow: row wrapとすることで、並び方と折り返し方を指定することができます。
試しに、flex-flowを使ってさっきの問題をやり直してみましょう。

#pond {
  display: flex;
  flex-flow: column wrap;
}

Flexbox Froggy - Lv. 21/24

カエルたちが池いっぱいに広がっていますが、蓮の葉は上方に集まっています。
複数の行が他の行とどう距離を取り広がるのかを指定するのに、align-contentを使うことができます。
このプロパティーは以下の値を取ります。

flex-start: 行はコンテナーの上側に詰められます。
flex-end: 行はコンテナーの下側に詰められます。
center: 行はコンテナーの中央に詰められます。
space-between: 行はその間に等しい間隔を空けて表示されます。
space-around: 行はその周囲に等しい間隔を空けて表示されます。
stretch: 行はコンテナーに合うよう引き延ばされます。

混乱したかもしれませんが、align-contentは行間の余白を決めるもので、align-itemsはコンテナーに含まれるアイテム全体としての配置を決めるものです。一行だけの場合はalign-contentは何も効果がありません。

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

Flexbox Froggy - Lv. 22/24

さて今回は蓮の葉は下へ詰められています。align-contentを使って、カエルたちをそこまで導いてください。

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

Flexbox Froggy - Lv. 23/24

カエルたちはパーティーを開いていましたが、もう家に帰る時間です。
flex-directionとalign-contentの組み合わせを使って、彼らの蓮の葉まで連れて行ってあげましょう。

#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-content: center;
}

Flexbox Froggy - Lv. 24/24

これまでに習ったCSSプロパティーを使って、もう一度だけカエルたちを家まで連れていってあげてください。

justify-content
align-items
flex-direction
order
align-self
flex-wrap
flex-flow
align-content

#pond {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-content: space-between;
}