justify-contentと align-itemsについて

公開日 :

  • コーディング

thumbnail

こんにちは!AndHAコーディング部です。
前回はflex-wrapflex-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の構造を理解するとよりレイアウトを組みやすくなります。
どんどん使いこなしてみましょう!

この記事をシェア

  • Twitter
  • Facebook
  • hatena-bookmark

合わせて読みたい