justify-content

CSSjustify-content プロパティは、フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

このデモはグリッドレイアウトを用いていくつかの値を紹介します。

長さや自動マージンが適用された後に配置が行われることから、フレックスボックスレイアウトflex-grow0 ではないフレックス要素が少なくとも 1 つある場合は利用可能なスペースがなくなりますので、このプロパティの効果はないでしょう。

構文

/* 位置による配置 */
justify-content: center;     /* アイテムを中央に寄せる */
justify-content: start;      /* アイテムを先頭に寄せる */
justify-content: end;        /* アイテムを末尾に寄せる */
justify-content: flex-start; /* フレックスアイテムを先頭に寄せる */
justify-content: flex-end;   /* フレックスアイテムを末尾に寄せる */
justify-content: left;       /* アイテムを左端に寄せる */
justify-content: right;      /* アイテムを右端に寄せる */

/* ベースラインによる配置 */
/* justify-content はベースラインの値を取りません */

/* 通常の配置 */
justify-content: normal;

/* 均等配置 */
justify-content: space-between; /* 各アイテムを均等に配置し
                                   最初のアイテムは先頭に寄せ、
                                   最後のアイテムは末尾に寄せる */
justify-content: space-around;  /* 各アイテムを均等に配置し
                                   各アイテムの両側に半分の大きさの
                                   間隔を置く */
justify-content: space-evenly;  /* 各アイテムを均等に配置し
                                   各アイテムの周りに同じ大きさの間隔を置く */
justify-content: stretch;       /* 各アイテムを均等に配置し
                                   サイズが 'auto' であるアイテムは、
                                   コンテナーに合わせて引き伸ばす */

/* あふれた場合の配置 */
justify-content: safe center;
justify-content: unsafe center;

/* グローバル値 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

start
各アイテムは、主軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。
end
各アイテムは、主軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。
flex-start
各アイテムは、フレックスコンテナーに依存して、主軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。
flex-end
各アイテムは、フレックスコンテナーに依存して、主軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。
これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。
center
各アイテムは、主軸方向で配置コンテナーの中央に向けて互いに寄せて配置されます。
left
各アイテムは、主軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
right
各アイテムは、主軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。
normal
各アイテムは justify-content の値が設定されていないかのように、既定の位置に寄せて配置されます。この値はグリッドおよびフレックスコンテナーの stretch として動作します。
baseline
first baseline

last baseline
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline の代替配置は startlast baseline の代替配置は end です。
space-between
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムは主軸の先頭側に寄せられ、最後のアイテムは主軸の末尾側に寄せられます。
space-around
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔は同じになります。最初のアイテムの前と最後のアイテムの後の余白は、隣接するアイテム同士の間隔の半分の幅になります。
space-evenly
各アイテムは、配置コンテナーの中で主軸方向に均等に配置されます。隣接するアイテム同士の間隔、最初のアイテムの前の余白、最後のアイテムの後の余白は、まったく同じ幅になります。
stretch

各アイテムの主軸に沿った寸法の合計が配置コンテナーの寸法よりも小さい場合、寸法が auto のアイテムは、 max-height/max-width (または同等の機能) での制約を尊重しつつ、 (比例的にではなく) 均等に引き伸ばされ、主軸方向の寸法の合計が配置コンテナーを満たすようになります。

メモ: stretch はフレキシブルボックス (フレックスボックス) は対応していません。

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

形式文法

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

ここで
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end

CSS

#container {
  display: flex;
  justify-content: space-between; /* live sample で変更可能 */
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

結果

仕様書

仕様書 状態 備考
CSS Box Alignment Module Level 3
justify-content の定義
草案 [ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe の値を追加
CSS Flexible Box Layout Module
justify-content の定義
勧告候補 初回定義
初期値normal
適用対象フレックスコンテナー
継承なし
計算値指定通り
アニメーションの種類離散値

ブラウザーの互換性

フレックスレイアウトでの対応

BCD tables only load in the browser

グリッドレイアウトでの対応

BCD tables only load in the browser

関連情報