flexboxのjustify-contentとalign-itemsについて

こんにちは！AndHAコーディング部です。
前回はflex-wrap、flex-flowについて紹介しましたが、
今回はjustify-content、align-itemsについてご紹介します。
https://and-ha.com/coding/flex-wrap-and-flex-flow/

justify-contentの概要

横並びにしたflexアイテムの揃え位置を指定します。

指定できる値

flex-start (既定値)
アイテムを左寄せで配置します。
以下のような表示になります。

See the Pen
justify-content: flex-start by ha-01 (@hasamplecom)
on CodePen.

flex-end
アイテムを右寄せで配置します。
以下のような表示になります。

See the Pen
justify-content: flex-end by ha-01 (@hasamplecom)
on CodePen.

center
アイテムを中央寄せで配置します。
以下のような表示になります。

See the Pen
justify-content: center by ha-01 (@hasamplecom)
on CodePen.

space-between
アイテムを余白をもって均等配置します。
以下のような表示になります。

See the Pen
justify-content: space-between by ha-01 (@hasamplecom)
on CodePen.

space-around
アイテムを左右端の余白を含めて均等な間隔で配置します。
以下のような表示になります。

See the Pen
justify-content: space-around by ha-01 (@hasamplecom)
on CodePen.

space-evenly
全てのアイテムが主軸方向に均等に配置されます。各アイテムの周りに同じサイズの間隔が付きます。
以下のような表示になります。

See the Pen
justify-content: space-evenly by ha-01 (@hasamplecom)
on CodePen.

stretch
すべてのアイテムが主軸の幅に合わせて伸縮して表示されます。
以下のような表示になります。

See the Pen
justify-content: stretch by ha-01 (@hasamplecom)
on CodePen.

align-itemsの概要

横並びにしたflexアイテムの並び方を整え、上下の配置を指定します。

指定できる値

stretch(既定値)
アイテムが高さまたは幅いっぱいに表示されます。
以下のような表示になります。

See the Pen
align-items: stretch by ha-01 (@hasamplecom)
on CodePen.

flex-start
アイテムが始点に配置されます。
以下のような表示になります。

See the Pen
align-items: flex-start by ha-01 (@hasamplecom)
on CodePen.

flex-end
アイテムが終点に配置されます。
以下のような表示になります。

See the Pen
align-items: flex-end by ha-01 (@hasamplecom)
on CodePen.

center
アイテムが中央に配置されます。
以下のような表示になります。

See the Pen
align-items: center by ha-01 (@hasamplecom)
on CodePen.

baseline
アイテムがベースラインに沿って配置されます。
以下のような表示になります。

See the Pen
align-items: baseline by ha-01 (@hasamplecom)
on CodePen.

参考になる記事

justify-content、align-itemsについては以下の記事がおすすめです。
justify-content – CSS: カスケーディングスタイルシート | MDN
align-items – CSS: カスケーディングスタイルシート | MDN

最後に

いかがでしたでしょうか?
justify-content、align-itemsの構造を理解するとよりレイアウトを組みやすくなります。
どんどん使いこなしてみましょう!