はじめに

最近、HTMLとCSSをしっかりかけるように、Progateをやり始めました。
flexboxについてもっと勉強をしようと思い、このゲームをやってみました。

ゲームなので、理解がしやすいです。１つ１つにしっかり説明がついているので、問題につまった時に、また戻って確認できるのでとても便利です。

justify-content

アイテムを水平方向に並べるもの（横の並べ方をきめるみたいな感じです）

※注意するところは、betweenとaroundの違いです

betweenは、アイテム同士の間にのみ等しい間隔を開けます。ですが、aroundは周囲なので、アイテム同士の間隔だけでなく、左右の間隔なども等しくしてくれます。

アイテムを垂直方向に並べるものです。（縦の並べ方をどうするか決めるみたいな感じ）

stretchだとflexboxの高さに合わせて、アイテムのサイズが自動的に伸び縮みする感じですね！

See the Pen align-items by mei (@mei1161) on CodePen.

コンテナー内でアイテムが配置される方向を決める（配置の仕方を決める）

reverseがつくとアイテムの順番が変わることを覚えておきましょう！

※reverse,columnなどを使用する場合、他の配置などにも影響する可能性があるので気をつけてください！

アイテムはデフォルトで０の値を取るが、正や負の整数値を設定することで、アイテムの位置を変えたりすることができる。

※同じクラスを１としてみるので、要素の数で正負の整数値を設置しない場合もある。

align-itemsと同じ値を設定することができる。
指定したアイテムのみ変更することができる。

行におさめるように設定したり、アイテムを他の行に折り返したりするかを設定することができる。

See the Pen flex-wrap by mei (@mei1161) on CodePen.

flex-direction(縦方向の並び方）とflex-wrap(行を折り返すかどうか)一緒にしたもの。

これを使うと一気に設定することができる
１つ目にflex-directionの指定、2つ目にflex-wrapの設定をいれます。
(逆でもOK)

複数の行が他の行とどういう風にどう距離を取り広がるかを指定する。

space-betweenだとアイテム同士の行間が調整されます。
space-aroundでは、上下の間もしっかり等しい間隔を空けます。
※１行だけの場合はalign-contentを使用しても、効果がないので注意！

column wrap reverseを使うと位置関係が、少し変わるので、難易度が高くなるような気がします。
このゲームを通して、flexboxの苦手意識を少しでも、無くして行けるといいと思います。