【勉強嫌いもわかる】justify-contentの意味と使い方

求職者支援訓練でwebデザインを学ぶデザイン初心者が、CSSの「justify-content」プロパティについて意味や使い方を忘備録としてまとめました。

難しいものではないので、このブログを見るだけで一通り理解できるはず！

デザイン初心者やノンデザイナーのブロガーさんにおすすめです。

justify-contentの構文
1. 【これだけは覚えておこう！】よく使う値６選
通常の配置
位置による配置
均等配置
あふれた場合の配置
グローバル値
justify-contentが効かない原因
おすすめの人気WEBデザイン参考書
まとめ
その他のWEBデザインに関する記事はこちら
1. 関連

justify-contentの構文

{ justify-contentジャスティファイ・コンテント : 位置; }

justify-contentプロパティは、flexコンテナの主軸に沿ってflexアイテムを一行に配置します。

justify-contentはdisplay:flexとセットで使うCSSです。
左右中央揃えの方法などでよく紹介されているjustify-contentですが、display:flexが指定されていないと指示が通りませんので、必ず親要素にdisplay:flexまたはinline-flexなどflex要素をセットで指定しておきましょう。

【これだけは覚えておこう！】よく使う値６選

よく使う値については、実装例を交えて解説します。

justify-content: center;　→アイテムを中央に寄せる
justify-content: flex-start;　→フレックスアイテムを先頭に寄せる
justify-content: flex-end;　→フレックスアイテムを末尾に寄せる
justify-content: space-between;　→アイテムの間にスペースを均等に割り付け
justify-content: space-around;　→アイテムの両端にスペースを均等に割り付け
justify-content: space-evenly;　→各アイテムを均等に配置し、各アイテムの周りに同じ大きさの間隔を置く

通常の配置

justify-content プロパティ	配置場所
justify-content: normal;

位置による配置

justify-content プロパティ	配置場所
justify-content: center;	アイテムを中央に寄せる
justify-content: start;	アイテムを先頭に寄せる
justify-content: end;	<アイテムを末尾に寄せる
	フレックスアイテムを先頭に寄せる
justify-content: flex-end;	フレックスアイテムを末尾に寄せる
justify-content: left;	アイテムを左端に寄せる
justify-content: right;	アイテムを右端に寄せる

※justify-content はベースラインの値を取りません

実装例＜justify-content: center;＞

左右に等しく空白ができます。item同士はくっついた状態です。

実装例＜justify-content: flex-start;＞

フレックスアイテムを先頭揃えで表示されます。初期値はこの「justify-content: flex-start;」です。

実装例＜justify-content: flex-end;＞

末尾揃えで表示されます。

均等配置

justify-content プロパティ	配置場所
justify-content: space-between;	アイテムの間にスペースを均等に割り付け
justify-content: space-around;	アイテムの両端にスペースを均等に割り付け
justify-content: space-evenly;	各アイテムを均等に配置し、各アイテムの周りに同じ大きさの間隔を置く
justify-content: stretch;	各アイテムを均等に配置し、サイズが ‘auto’ であるアイテムをコンテナに合わせて引き伸ばす

※「stretch」はフレキシブルボックス (フレックスボックス) には対応していません。

実装例＜justify-content: space-between;＞

item1の左側、item4の右側に空白は入りません。

space→空白
between→間

『アイテムとアイテムの「間」に「空白」を入れる』と考えといいでしょう。

実装例＜justify-content: space-around;＞

space-between;と異なり、端のitemにも空白が入っています。

space→空白
around→周り

アイテムの「周り」に「空白」が均等に配置されます。アイテムの周りに同じサイズのmarginをつけてるイメージです。

実装例＜justify-content: space-evenly;＞

各アイテムを均等に配置し、各アイテムの周りに同じ大きさの間隔を置くイメージです。

space→空白
evenly→均等

一見「space-around」に近いですが、全ての「空白」が「均等」に配置されます。

あふれた場合の配置

justify-content プロパティ	配置について
justify-content: safe center;	配置キーワード（centerなど）と共に使用する。選択されたキーワードによって、アイテムが配置コンテナをあふれてデータの損失が発生する場合、アイテムは配置モードが start であったかのように配置される。
justify-content: unsafe center;	配置キーワード（centerなど）と共に使用する。アイテムと配置コンテナの相対的な寸法にかかわらず、またデータの損失が発生するかどうかにかかわらず、指定した値を尊重する。

グローバル値

justify-content プロパティ	備考
justify-content: inherit;	inherit は親要素のプロパティを継承する。英語で inherit は「受け継ぐ、相続する、遺伝する」という意味。プロパティの計算値を、明示的に継承することを指定することができます。
justify-content: initial;	initial はプロパティの初期値 (規定値) を設定する。英語で initial は「初めの、最初の、初期の」という意味。そのstyleのプロパティの初期値又は規定値を設定する。初期値に戻したい時に使用できる。
justify-content: revert;	ユーザーエージェントのstyleをセットします。プロパティそのものの初期値ではありません。
justify-content: unset;	親から値が継承されている場合は継承値、継承されていない場合は初期値を設定する。