CSS3

：

プロパティ

：

justify-content

　編集：2022.07.14 by T.A.

コンテナ内容の配置分布。

名前	`justify-content`
値	normal \| <content-distribution> \| <overflow-position>? [<content-position> \| left \| right]
初期値	normal
適用対象	複 column コンテナ、flex コンテナ、格子コンテナ
継承	されない
百分率	受容しない
算出値	指定されたキーワード（たち）
正準的順序	文法に従う
アニメーション型	離散的

ボックス内容を、それ一体として（整列対象として）ボックス自身（整列コンテナ）の中で、ある基準に整列させる：

justify-content に対しては、ボックスの［行内／row／主］軸方向に。

normal

table cell の align-content に指定された場合に限り、vertical-align [CSS2] （の下位プロパティ）の算出値に依存する：

baseline-shift が top ならば start と同じにふるまう／
baseline-shift が bottom ならば end と同じにふるまう／
他の場合は alignment-baseline が middle ならば center と同じにふるまう／
他の場合は baseline と同じにふるまう

他の場合の normal は、start と同じにふるまう。

<DIV style="border:1px solid red; width:150px; height:100px;
 display:flex;
 flex-wrap:wrap;
 justify-content:normal;
">
 <DIV style="flex-basis:50px; border:1px solid black;">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black;">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black;">3</DIV>
</DIV>

<DIV style="border:1px solid red;
 display:grid;
 grid-template:50px 70px/50px 100px;
 justify-content:normal;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">2</DIV>
 <DIV style="border:1px solid black;">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:150px; height:100px;
 display:grid;
 grid-template:'a b' 'c d';
 justify-content:normal;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">2</DIV>
 <DIV style="border:1px solid black;">3</DIV>
</DIV>

<content-distribution>

＝space-between
| space-around
| space-evenly
| stretch

space-between ●

整列対象たちは、整列コンテナ内で均等に分布される。［最初／最後］の整列対象は、整列コンテナの同じ側の辺に接合されるように置かれ、残りの整列対象たちは、隣接する、どの 2 つの整列対象の合間も同じアキになるように分布される。

例えばアイテムが 3 個あるとき、余った空間は 2 等分された上で、各 1/2 は［最初の 2 個のアイテムの合間、最後の 2 個のアイテムの合間］に分配される。

この値用の既定のフォールバック整列は flex-start とする。（flex レイアウト以外のレイアウトモード下では、flex-start は start に一致する。）

<DIV style="display:flex;
 flex-direction:row;
 justify-content:space-between;
 border:1px solid red;
 width:250px; height:50px;
">
 <DIV style="flex-basis:50px; border:1px solid black">１</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">２</DIV>
 <DIV style="flex-basis:70px; border:1px solid black">３</DIV>
</DIV>

<DIV style="display:grid;
 grid-template:50px 70px/50px 70px 100px;
 justify-content:space-between;
 border:1px solid red;
">
 <DIV style="border:1px solid black">１</DIV>
 <DIV style="border:1px solid black">２</DIV>
 <DIV style="border:1px solid black">３</DIV>
 <DIV style="border:1px solid black">４</DIV>
 <DIV style="border:1px solid black">５</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:100px;
 display:grid;
 grid-template:'a b c' 'd e f'/40px 50px 60px;
 justify-content:space-between;
">
 <DIV style="border:1px solid black">１</DIV>
 <DIV style="border:1px solid black">２</DIV>
 <DIV style="border:1px solid black">３</DIV>
 <DIV style="border:1px solid black">４</DIV>
 <DIV style="border:1px solid black">５</DIV>
</DIV>

<DIV style="column-count:3;
 width:200px;
 justify-content:space-between;
 border:1px solid red;
">
ああああああああああああああ
</DIV>

複カラムコンテナ：¶

space-around ●

整列対象たちを、［最初／最後］の整列対象の［前／後］に、他の整列対象の合間の半分の空間を与えることを除いて、space-between のときと同様に分布させる。

例えばアイテムが 3 個あるとき、余った空間は 6 等分された上で、各 1/6 は［始端、終端］に 1 個ずつ、［最初の 2 個のアイテムの合間、最後の 2 個のアイテムの合間］に 2 個ずつ分配される。

この値用の既定のフォールバック整列は safe center とする。

<DIV style="border:1px solid red; width:200px; height:50px;
 display:flex;
 justify-content:space-around;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:50px;
 display:grid;
 justify-content:space-around;
 grid-template:'a b c'/40px 50px 60px;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

<DIV style="column-count:3;
 width:200px;
 justify-content:space-around;
 border:1px solid red;
">
ああああああああああああああ
</DIV>

複カラムコンテナ：¶

space-evenly ●

整列対象たちを、［最初／最後］の整列対象の［前／後］に、他の整列対象の合間と同じ空間を与えることを除いて、space-between のときと同様に分布させる。

space-evenly
例えばアイテムが 3 個あるとき、余った空間は 4 等分された上で、各 1/4 は［始端、終端、最初の 2 個のアイテムの合間、最後の 2 個のアイテムの合間］に分配される。

この値用の既定のフォールバック整列は safe center とする。

<DIV style="border:1px solid red; width:200px; height:50px;
 display:flex;
 justify-content:space-evenly;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:50px;
 display:grid;
 justify-content:space-evenly;
 grid-template:'a b c'/40px 50px 60px;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

stretch ●

整列対象たちの合計サイズが整列コンテナのサイズより小さい場合に、合計サイズが整列コンテナを正確に埋めるように、［整列対象たちのうち、サイズが auto にされているもの］のサイズを、その［max-height／max-width］（あるいは等価な機能性）により課される拘束は守りつつ、等しく増やす（比例的にではなく）。

stretch
例えばアイテムが 3 個あるとき、余った空間は 3 等分された上で、各 1/3 が各アイテムに分配される。

この値用の既定のフォールバック整列は flex-start とする。（flex レイアウト以外のレイアウトモードの下では flex-start は start と一致する。）

<DIV style="border:1px solid red; width:200px; height:50px;
 display:flex;
 justify-content:stretch;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:auto; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:50px;
 display:grid;
 justify-content:stretch;
 grid-template:'a b c'/40px 50px auto;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

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

<overflow-position>?

＝unsafe
| safe

（safe と unsafe 値が指定されていない場合）：
過フロー整列が明示的に指定されていない場合の“既定のモード”は、safe と unsafe の合いの子になり、整列対象は：

その整列コンテナを過フローすることは許容されるが、
その最も近い先祖のスクロールコンテナのスクロール可能な過フロー区画も過フローすることになる場合は（すなわち、“スクロール不能な”領域まで拡がる）、その方向における過フローは、残りの過フローを反対側へ偏らせることにより制限される。

unsafe ●

整列対象の［整列コンテナに対する相対的なサイズ］に関わらず、所与の整列値は尊守される。

<DIV style="border:1px solid red; width:50px; height:150px;
 display:flex;
 flex-direction:column;
 justify-content:unsafe center;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">22222</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:50px; height:200px;
 display:grid;
 grid-template:40px 50px 60px;
 justify-content:unsafe center;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">22222</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

safe ●

整列対象のサイズが整列コンテナを過フローする場合、整列対象は，整列モードが start であったかのように整列される。

<DIV style="border:1px solid red; width:50px; height:150px;
 display:flex;
 flex-direction:column;
 justify-content:safe center;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">22222</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:50px; height:200px;
 display:grid;
 grid-template:40px 50px 60px;
 justify-content:safe center;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">22222</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

<content-position> 戻る

＝center
| start
| end
| flex-start
| flex-end

center ●

整列対象を、その整列コンテナの中で中央寄せにする。

<DIV style="border:1px solid red; width:200px; height:50px;
 display:flex;
 justify-content:center;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:50px;
 display:grid;
 justify-content:center;
 grid-template:'a b c'/40px 50px 60px;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

start ●

整列対象が、整列コンテナの始端辺に接合されるように整列する。

<DIV style="border:1px solid red; width:200px; height:50px;
 display:flex;
 justify-content:start;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:50px;
 display:grid;
 justify-content:start;
 grid-template:'a b c'/40px 50px 60px;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

end ●

整列対象が、整列コンテナの終端辺に接合されるように整列する。

<DIV style="border:1px solid red; width:200px; height:50px;
 display:flex;
 justify-content:end;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:200px; height:50px;
 display:grid;
 justify-content:end;
 grid-template:'a b c'/40px 50px 60px;
">
 <DIV style="border:1px solid black">1</DIV>
 <DIV style="border:1px solid black">2</DIV>
 <DIV style="border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:250px;
 column-count:3;
 justify-content:end;
">
 <SPAN>1</SPAN><BR>
あ<BR>あああああああああああああああああああ
</DIV>

¶意味なし

flex-start ●

flex レイアウトに限られる。[CSS-FLEXBOX-1]

整列コンテナ ― すなわち flex コンテナ ― の各辺のうち［次に与える側にあって、プロパティが対象にする軸方向にある方］に、整列対象が接合されるように整列する：

flex-start に対しては、主始端、または交叉始端 ●
flex-end に対しては、主終端、または交叉終端

［flex-start／flex-end］値が flex 整形文脈の外側で利用されたとき ― すなわち、次に該当するとき ― のふるまいは［start／end］と同じになる：

flex アイテムでないボックス（または、flex コンテナの子であって絶対的に位置されたボックスの静的位置を決定するときなど、flex アイテムを装うボックス）上で、自己整列プロパティに利用されたとき
flex コンテナでないボックス上で、内容分布プロパティに利用されたとき

<DIV style="border:1px solid red; width:200px; height:50px;
 display:flex;
 justify-content:flex-start;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">3</DIV>
</DIV>

flex-end ●

flex-start を参照。

<DIV style="border:1px solid red; width:200px; height:50px;
 display:flex;
 justify-content:flex-end;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">3</DIV>
</DIV>

left ●

整列コンテナの各辺のうち［次に与える側にあって，適切な軸にある方］に、整列対象が接合されるように整列する：

行左端、または（物理的）左端

<DIV style="border:1px solid red; width:200px; height:50px;
 display:flex;
 justify-content:left;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">3</DIV>
</DIV>

right ●

整列コンテナの各辺のうち［次に与える側にあって，適切な軸にある方］に、整列対象が接合されるように整列する：

行右端、または（物理的）右端

<DIV style="border:1px solid red; width:200px; height:50px;
 display:flex;
 justify-content:right;
">
 <DIV style="flex-basis:40px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:60px; border:1px solid black">3</DIV>
</DIV>

テスト

ここに表示

¶[Edge]✖

ここに表示

スクリプト：

スクリプト：

表示内容：