このページの目次

justify-contentとは？

読み方：justify-content

最終更新：2026/08/18

3秒でわかる

Flexbox や Grid で、主軸の方向へ子要素をどう並べるかを決める CSS の性質。余った空間の配り方を指定します。

もう少し詳しく

どういうものか

justify-content は、Flexbox や Grid の親要素に指定し、主軸の方向で子要素をどう配置するかを決める CSS の性質になる。子要素の合計幅が親より小さいとき、余った空間をどこへ配るかを指定するもの、と考えると分かりやすい。既定は flex-start で、余白はすべて後ろに集まる。

なぜ必要か

横並びにしただけでは、要素は左に寄って右側が空く。ヘッダーでロゴを左、メニューを右へ置きたい、ボタンを中央に置きたい、といった要望は余白の配り方で決まる。個々の要素に margin を足して調整すると、要素数が変わるたびに崩れる。親側で配り方を宣言しておけば、子の数が変わっても意図した並びが保たれる。

具体例

.header {
  display: flex;
  justify-content: space-between;   /* 両端に寄せ、間を均等に空ける */
  <a href="/glossary/align-items" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">align-items</a>: center;
}

主な値の違いは次のとおりになる。

flex-start      [AAA][BBB][CCC]..........
center          .....[AAA][BBB][CCC].....
flex-end        ..........[AAA][BBB][CCC]
space-between   [AAA]....[BBB]....[CCC]
space-around    ..[AAA]....[BBB]....[CCC]..
space-evenly    ...[AAA]...[BBB]...[CCC]...

つまずきやすいところ

親に display: flex を書き忘れると何も起きない。この性質は Flexbox と Grid の中でだけ働くため、効かないときはまず親の display を確認する。

主軸の向きを取り違えるのも多い。flex-direction: column にすると主軸は縦になり、justify-content は縦方向の配置を指すようになる。「横方向の指定」と覚えていると、縦並びにした途端に意図と食い違う。横方向を動かしたいのに縦になった場合は、direction の値を疑う。

space-between は子が 1 つのときに始点へ寄る。要素数が変わりうる場所では、想定した見た目になるか両方の場合で確かめる。

似た用語との違い

性質	効く方向	役割
justify-content	主軸	余白の配り方
align-items	交差軸	交差方向のそろえ方
align-content	交差軸	複数行になったときの行の配り方