CSSのdisplay: flex;の書き方!justify-contentとalign-itemsの使い方を徹底解説!

2020年11月2日

CSSのプロパティ、display: flex;。

justify-contentとalign-items、2つの違いが分からない、という方も多いのではないでしょうか。私も苦戦したので、そんな疑問に答えます。

justify-contentとalign-itemsの違い:主軸方向か交差軸方向か

結論から言うと、2つのプロパティの違いを決めるのは、指定の対象が「主軸方向か交差軸方向か」です。

  • justify-content:flexアイテムの主軸方向の揃え方を指定
  • align-items:flexコンテナ内のflexアイテムの交差軸方向の揃え方を指定

justify-content

justify-contentではflexアイテムの主軸方向の揃え方を指定します。

プロパティ値は以下です。

flex-startmain startから詰めて配置
flex-endmain endから詰めて配置
center行の中央に向けて詰めて配置
space-between主軸方向にそれぞれ均等に配置。
両端のアイテムはmain start/endにそれぞれくっついて配置。
space-around主軸方向にそれぞれ均等に配置。
アイテム間の余白と、両端のアイテムからmain start/end間の余白は等しくなる。

flex-start

A
B
C
D
E

flex-end

A
B
C
D
E

center

A
B
C
D
E

space-between

A
B
C
D
E

space-around

A
B
C
D
E

align-items

align-itemsでは、flexコンテナ内のflexアイテムの交差軸方向の揃え方を指定します。

flex-startマージン辺をcross startに揃える
flex-endマージン辺をcross endに揃える
center交差軸方向に中央揃え
baselineベースラインの位置を揃える
stretch高さを自動的に揃える

flex-start

A
B
C
D
E

flex-end

A
B
C
D
E

center

A
B
C
D
E

baseline

A
B
C
D
E

stretch

A
B
C
D
E

主軸・交差軸とflex-direction

「そもそも主軸・交差軸が分からない」という場合もあると思うのでこちらも解説します。

簡単に言うと、flex-directionをもとに主軸が決まり主軸をもとに交差軸が決まります。

  • 主軸:ボックスの配置方向=flex-directionで指定された方向
  • 交差軸:主軸と交わる方向

flex-direction:ボックスの配置方向の指定

ボックスの配置方向、つまり主軸方向はプロパティflex-directionによって指定されます。以下、プロパティ値の一覧です。

ボックスの配置方向
row書字方向。初期値。
row-reverse書字の逆方向。
columnブロック軸(行が増える方向)方向。
column-reverseブロック軸の逆方向。

主軸

主軸とはアイテムの並ぶ方向です。

前述の通り、プロパティflex-directionでは、flexアイテムを並べる方向を指定することができます。この方向を主軸と言います。

交差軸

こちらは主軸と交差する軸、つまり主軸に対して垂直な軸です。

例えば主軸がrowの場合、主軸は横なので交差軸は縦です。

逆に主軸がcolumnの場合、主軸は縦なので交差軸は横になります。

 

最後に

以上!

justify-contentとalign-itemsの違いについてでした!

CSSは奥が深くて、理解するととても楽しいです!

それでは良いディベロッパーライフを!

Peace!

スポンサーリンク