【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）

今回は justify-contentプロパティを使ってみよう。
これは、コンテナ内のアイテムの、主軸方向の配置や分布の方法を決めます。
コンテナ側に指定します。

本日のINDEX

1. justify-contentプロパティは主軸方向を担当
2. justify-contentプロパティの値
3. justify-contentプロパティを使ってみた（サンプル）
   1. Grid Layout での justify-content
   2. Flexbox での justify-content

ボックス配置は、下記のように記事を分けます。

【63】アイテム間の空きを指定する gap（row-gap, column-gap）

【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ）

【64-2】ボックス配置の「整列キーワード」まとめ

【64-3】アイテムの配置・分布を指定する justify-content（主軸方向）　←今日はココ

【64-4】アイテムの配置・分布を指定する align-content（交差軸方向）

【64-5】アイテムの配置・分布を指定するショートハンド place-content

【64-6】アイテム個別の配置を指定する justify-self (主軸方向)

【64-7】アイテム個別の配置を指定する align-self (交差軸方向)

【64-8】アイテム個別の配置を一括指定する place-selfショートハンド

【64-9】アイテムの個別配置を一度に指定する justify-items (主軸方向)

【64-10】アイテムの個別配置を一度に指定する align-items (交差軸方向)

【64-11】アイテム配置を一括指定する place-itemsショートハンド

参考：
・CSS Box Alignment Module Level 3 | W3C Working Draft
・CSS ボックス配置 | MDN

justify-contentプロパティは主軸方向を担当

justify-contentプロパティは、主軸方向のアイテムの配置・分布を指定します。
横書きモードなら 主軸は横方向。縦書きモードなら 主軸は縦方向です。

配置の場合は padding を調整している感じ。
分布はアイテム間の空きを調整します。

配置か分布かは、指定する値（整列キーワード）によって変わります。
配置用には「位置的整列（center とか left とか start とか）」や「ベースライン整列（テキストのベースラインに合わせる整列）」などがあります。
分布用は「分布型整列キーワード（stretch、space-between、space-around、space-evenly の4個のみ）」です。
詳しくは【64-2】ボックス配置の「整列キーワード」まとめ をご覧ください。

主軸（インライン軸）とは、書字方向を軸とするもの。
普通の横書きモードなら主軸は横方向で、それに交差する交差軸はタテ方向です。
書字方向に対しての軸なので、縦書きモードだと軸が入れ替わります。

（詳しくは【64-1】ボックス配置の全体的なルール（9コのプロパティまとめ） をご覧ください）

justify-contentプロパティの値

値は 全部キーワードです。

justify-contentプロパティの値
CSS構文	normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] normalがデフォルト値。
<content-distribution>	space-between | space-around | space-evenly | stretch
<overflow-position>	unsafe | safe 注意：この2つはW3C仕様書の冒頭で「at-risk」に入ってて「勧告候補時に落とされるかも（may be dropped during the CR period）」とあるので無くなる可能性もあります。（2022年2月記）
<content-position>	center | start | end | flex-start | flex-end
グローバル値	inherit; 親の値を継承 initial; 継承した親の値を解消しデフォルト値に戻す unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	なし	適用できる要素	Gridコンテナ flexコンテナ マルチカラム コンテナ

CSS構文は、
normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
となっています。これを読み解くと、
normal と <content-distribution> は単独で使う。
「<content-position> か left か right 」は単独で使うか、safe か unsafe を頭にくっつけて使うということ。

デフォルト値は「normal」。これは「stretch」と同じ振る舞いをするそうです。
その他の値は全部整列キーワードで、
分布用だと space-between、space-around、space-evenly、stretch
配置用だと left、right、center、start、end、flex-start、flex-end です。
最後の「flex-start」と「flex-end」は flexコンテナだけでしか使えません。

それぞれの整列キーワードの意味は、
【64-2】ボックス配置の「整列キーワード」まとめ でざっとまとめていますのでご覧ください。
キーワードの中にはW3C仕様書で「at-risk」に入っていて「勧告候補時に落とされるかも（may be dropped during the CR period）」なものもありますので、注意が必要かも。

justify-contentプロパティを使ってみた（サンプル）

justify-contentプロパティは、コンテナ側に指定します。
Grid Layout と Flexbox でサンプルを作ってみました。

Grid Layout での justify-content

サンプルでは、アイテムの幅を25％にして個数は3個にしています。 Gridアイテムのサイズの合計が Gridコンテナより小さい場合でしか分布や配置ができないのでね。

この↓ように、grid-template-columns で 1トラックでも「fr」値を指定すると、全アイテムがコンテナを満たすことになるので、justify-contentを使っても効果なし。

1fr

25%

25%

Grid Layout についての詳細はこちらをご覧ください。
【62-1】Grid Layout の grid-template-rows, grid-template-columns

通常の横書きモードでのサンプルなので、主軸は左から右への横方向です。
サンプルの HTMLやCSS の基本はこちら。

<div class="container">
  <div>25%</div>
  <div>25%</div>
  <div>25%</div>
</div>

.container{
  box-sizing: border-box;
  border: 1px solid#ccc;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 25%);
  /*justify-content:「値」; はここに追加していきます*/
  }
.container div{padding: 1em 0; text-align: center; line-height: 1em}
.container div:nth-child(1) {background:#85cbbf}
.container div:nth-child(2) {background:#ffe9a9}
.container div:nth-child(3) {background:#f8c6bd}

justify-content: normal（デフォルト = stretch と同じ振る舞いになります。stretch についてはこのすぐ下で説明しています）

25%

25%

25%

justify-content: space-between
アイテム間（between）の空きが同じサイズになるように分布します。

25%

25%

25%

justify-content: space-around
アイテム間の空きの「半分の空き」を最初と最後のアイテムの前後（around）につけて分布します。

25%

25%

25%

justify-content: space-evenly
アイテム間の空きと、最初と最後のアイテムの前後の空きを全部均等（evenly）にして分布します。

25%

25%

25%

justify-content: stretch（ = normal と同じ。指定しなくてもコレ）
アイテムのサイズを伸ばして（stretch）、コンテナいっぱいに満たします。
ですが、このサンプルではアイテム幅を25％に指定しているので、「start」と同じになります。アイテムサイズが「auto」のときのみ stretch が効きます。

25%

25%

25%

下は「grid-template-columns: repeat(3, auto)」と指定。アイテムサイズを auto にしたので stretch が効いています。 というより、これがデフォルトの姿。アイテムサイズが auto なら、わざわざ justify-content: stretch と指定しなくてもこうなるってことです。

auto

auto

auto

justify-content: left
物理的に「左揃え」にします。（書字方向と関係なく）

25%

25%

25%

justify-content: right
物理的に「右揃え」にします。（書字方向と関係なく）

25%

25%

25%

justify-content: center
「センター揃え」にします。

25%

25%

25%

justify-content: start
書字方向の「始点」のある辺に揃えます。普通の横書きだと左揃えです。

25%

25%

25%

justify-content: end
書字方向の「終点」のある辺に揃えます。普通の横書きだと右揃えです。

25%

25%

25%

Flexbox での justify-content

Flexbox の場合も、Flexアイテムのサイズの合計が Flexコンテナより小さい場合のみ 分布や配置ができるので、アイテムは flex-basis: 25% にして個数は3個に。
flex-growは指定していません（デフォルトの flex-grow: 0 ）

こんなかんじ↓で、Flexアイテムに flex-grow: 1 を指定すると、Flexアイテムはコンテナを満たすので、justify-contentを使っても意味なし。

flex-grow:1

25%

25%

Flexbox についての詳細はこちらをご覧ください。
【18-1】Flexbox を使おう！（display: flexで Flexboxを作る）

そしてもう一つ。
Flexbox では、主軸・交差軸は flex-directionプロパティによって変わります。
flex-direction: row がデフォルト値で、この場合は交差軸はタテ方向です。
flex-direction: column を指定すると、アイテムはタテ方向に並ぶので、主軸がタテ方向、交差軸は横方向になります。

Flexboxの主軸・交差軸 に関して詳しくはこちら。
フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN

今回のサンプルは、flex-direction: row（デフォ値）で作りますので、主軸は 横方向です。
これ以降のサンプルの HTMLやCSS の基本はこちら。

<div class="con_flex">
  <div> </div>
  <div> </div>
  <div> </div>
</div>

.con_flex{
  box-sizing:border-box;
  border:1px solid#ccc;
  padding:0;
  margin:0 0 .5em;
  display: flex;
  /*justify-content:「値」; はここに追加していきます*/
  }
.con_flex div{
  flex-basis:25%;
  padding:1em 0;
  text-align:center;
  line-height:1em;
  }

justify-content: normal（デフォルト。Flexboxでは主軸方向の伸縮は flex-grow、flex-shrink が制御するので flex-start と同じになります）

25%

25%

25%

justify-content: space-between
アイテム間（between）の空きが同じサイズになるように分布します。

25%

25%

25%

justify-content: space-around
アイテム間の空きの「半分の空き」を最初と最後のアイテムの前後（around）につけて分布します。

25%

25%

25%

justify-content: space-evenly
アイテム間の空きと、最初と最後のアイテムの前後の空きを全部均等（evenly）にして分布します。

25%

25%

25%

justify-content: stretch（ = normal と同じ。指定しなくてもコレ）
stretch は アイテムのサイズを伸ばして（stretch）、コンテナいっぱいに満たします値ですが、ここではアイテム幅を25％に指定しているので「flex-start」と同じになります。

25%

25%

25%

下は、各アイテムに「flex-grow:1」を指定しています。（flex-basis: 25% はそのまま）
Flexboxでは主軸方向の伸縮は flex-grow、flex-shrink が制御するので flex-grow をデフォルトの「0」より大きい数値にすれば勝手にサイズを伸ばしてくれます。
とにかく Flexbox では、各アイテムに「flex-grow:1」を指定すれば、わざわざ justify-content: stretch と指定しなくてもこうなるってことです。

flex-grow:1

flex-grow:1

flex-grow:1

justify-content: left
物理的に「左揃え」にします。（書字方向と関係なく）

25%

25%

25%

justify-content: right
物理的に「右揃え」にします。（書字方向と関係なく）

25%

25%

25%

justify-content: center
「センター揃え」にします。

25%

25%

25%

justify-content: start
書字方向の「始点」のある辺に揃えます。普通の横書きだと左揃えです。

25%

25%

25%

justify-content: end
書字方向の「終点」のある辺に揃えます。普通の横書きだと右揃えです。

25%

25%

25%

justify-content: flex-start（ = normal と同じ。指定しなくてもコレ）
flex-directionプロパティによる「始点」にアイテムを整列させます。
デフォルトの flex-direction: row なら書字方向に従って「始点」が決まります。
＊Flexbox だけで使える値です。

25%

25%

25%

justify-content: flex-end
flex-directionプロパティによる「終点」にアイテムを整列させます。
デフォルトの flex-direction: row なら書字方向に従って「終点」が決まります。
＊Flexbox だけで使える値です。

25%

25%

25%

次回予告

次は、align-contentプロパティを使ってみます。
今回の justify-content は主軸方向（横書きだったら横方向）でしたが、align-content は交差軸方向（横書きだったらタテ方向）の配置や分布を指定するやつです。