justify-content

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

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

試してみましょう

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

構文

css
/* 位置による配置 */
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: revert;
justify-content: unset;

start

各アイテムは、主軸方向で配置コンテナーの先頭側の端に向けて互いに寄せて配置されます。

end

各アイテムは、主軸方向で配置コンテナーの末尾側の端に向けて互いに寄せて配置されます。

flex-start

各アイテムは、フレックスコンテナーに依存して、主軸の先頭側である配置コンテナーの端に向けて互いに寄せて配置されます。 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は start のように扱われます。

flex-end

各アイテムは、フレックスコンテナーに依存して、主軸の末尾側である配置コンテナーの端に向けて互いに寄せて配置されます。 これはフレックスレイアウトのアイテムのみに適用されます。フレックスコンテナーの子ではないアイテムでは、この値は end のように扱われます。

center

各アイテムは、主軸方向で配置コンテナーの中央に向けて互いに寄せて配置されます。

left

各アイテムは、主軸方向で配置コンテナーの左側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は start のように動作します。

各アイテムは、主軸方向で配置コンテナーの右側の端に向けて互いに寄せて配置されます。プロパティの軸がインライン軸と平行でない場合は、この値は 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
適用対象フレックスコンテナー
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

justify-content = 
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

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

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

結果

仕様書

Specification
CSS Box Alignment Module Level 3
# align-justify-content
CSS Flexible Box Layout Module Level 1
# justify-content-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報