フレックス・グリッドのレイアウト

概要
結論
関連仕様書
用語
レイアウトの対象
CSSプロパティの使い分け
値の説明
safeとunsafe
動きを試してみる

概要

フレックスボックス、グリッド、マルチカラム、ボックス等をレイアウトするために使用される、下記のCSSプロパティについて説明します。

結論

結論だけ先に書くと、現時点では下記を指定するのがよさそうです。

フレックスの横方向の配置

右寄せ：justify-content: flex-end
中寄せ：justify-content: center
左寄せ：justify-content: flex-start
均等配置(1)：justify-content: space-between
均等配置(2)：justify-content: space-around
均等配置(3)：justify-content: space-evenly

フレックスの縦方向の配置

上寄せ：align-items: flex-start
中寄せ：align-items: center
下寄せ：align-items: flex-end

グリッドの横方向の配置

右寄せ：justify-content: end
中寄せ：justify-content: center
左寄せ：justify-content: start
均等配置(1)：justify-content: space-between
均等配置(2)：justify-content: space-around
均等配置(3)：justify-content: space-evenly

グリッドの縦方向の配置

上寄せ：align-content: start
中寄せ：align-content: center
下寄せ：align-content: end
均等配置(1)：align-content: space-between
均等配置(2)：align-content: space-around
均等配置(3)：align-content: space-evenly

用語

親要素を コンテナ、子要素を アイテム と呼びます。

文字が並ぶ方向を主軸、改行が進む方向を 交差軸 と呼びます。通常は左から右が主軸、上から下が交差軸です。アラビア語など文字を右から左に書く環境では主軸は右から左となります。日本語の縦書きでは主軸は上から下、交差軸は右から左となります。

レイアウトの対象

レイアウトの対象には下記のものがありますが、フレックスとグリッド以外は、まだブラウザの対応が追い付いていないため、ここではフレックスとグリッドについてのみ説明します。

flex で作成するフレックスコンテナ。
grid で作成するグリッドコンテナ。
columns で作成するマルチカラムコンテナ。
<table> で作成するテーブルセル。
<div> などで作成するブロックボックス。

CSSプロパティの使い分け

justify- と align- と place- の違い

justify-* は主軸方向のレイアウトを制御します。align-* は交差軸方向のレイアウトを制御します。place-* は主軸と交差軸をまとめて指定します。

-self と -items と -content の違い

*-self はアイテムに直接指定します。*-items や *-content はコンテナに指定してその子アイテムのレイアウトを制御します。

CSS

.container {
  justify-items: ...;
  justify-content: ...;
  align-items: ...;
  align-content: ...;
}
.item {
  justify-self: ...;
  align-self: ...;
}

-items と -content の違い

flex-wrap: wrap などでアイテムが改行されている場合や、グリッドで行・列の概念がある場合、*-items はひとつの行や列の中での、個々の子アイテムの位置を制御するのに対して、*-content は、行や列自体をどのように配置するかを制御します。

値の説明

normal: 何も指定しない場合の規定値です。主軸方向に関しては start, flex-start と同様、交差軸方向に関しては stretch と同様の振る舞いをします。
auto: 親コンテナの指定に従います。
center: 軸方向の中間に揃えます。
start
end: 軸方向の開始側、終了側にアイテムを寄せます。(Chrome では、グリッドでは使用できるが、フレックスボックスでは使用できない？)
flex-start
flex-end: フレックスボックスでのみ使用します。軸方向の開始側、終了側にアイテムを寄せます。フレックスボックス以外で使用した場合は start, end とみなされます。([CSS-FLEXBOX-1] との互換性のために残されている？)
self-start
self-end: start, end が親コンテナの軸方向を基準に揃えるのに対し、self-start, self-end は子アイテムの軸方向を基準に揃えます。例えば、子アイテムがアラビア語で、主軸が右から左であれば、self-start は右側に揃えます。(まだあまりサポートされていない？)
baseline
first baseline
last baseline: アイテムの中の文字のベースライン (文字 A や m の下端) を揃えます。first baseline は 1行目のベースライン、last baseline は最終行のベースラインに揃えます。baseline は first baseline と同じ動作となります。
space-between: 均等配置します。アイテム間のみ余白を入れ、最初のアイテムの前、最後のアイテムの後ろには余白を入れません。
space-around: 均等配置します。最初のアイテムの前、最後のアイテムの後ろには、アイテム間の半分の余白を入れます。
space-evenly: 均等配置します。最初のアイテムの前、最後のアイテムの後ろにも、アイテム間と同じ余白を入れます。
stretch: 余白が無くなるようにアイテムを伸長します。
left
right: 軸の方向に関わらず、左側、右側に寄せます。
legacy
legacy left
legacy right
legacy center: 子孫要素にも left, right, center を継承します。正式勧告では削除されるかもしれません。
anchor-center: 配置ボックスをアンカーの中央に表示するために [CSS-ANCHOR-POSITION-1] で追加されました。詳細はアンカーポジショニングを参照してください。

値		[CSS-FLEXBOX-1]				[CSS-ALIGN-3]
値		justify-content	align-self	align-items	align-content	justify-self	justify-items	justify-content	align-self	align-items	align-content
	normal	－	－	－	－	○	○	○	○	○	○
	auto	－	○	－	－	○	－	－	○	－	－
方向	center	○	○	○	○	○	○	○	○	○	○
	start	－	－	－	－	○	○	○	○	○	○
	end	－	－	－	－	○	○	○	○	○	○
	flex-start	○	○	○	○	○	○	○	○	○	○
	flex-end	○	○	○	○	○	○	○	○	○	○
	self-start	－	－	－	－	○	○	－	○	○	－
	self-end	－	－	－	－	○	○	－	○	○	－
	left	－	－	－	－	－	○	○	－	－	－
	right	－	－	－	－	－	○	○	－	－	－
ベースライン	baseline	－	○	○	－	○	○	－	○	○	○
	first baseline	－	－	－	－	○	○	－	○	○	○
	last baseline	－	－	－	－	○	○	－	○	○	○
間隔	space-between	○	－	－	○	－	－	○	－	－	○
	space-around	○	－	－	○	－	－	○	－	－	○
	space-evenly	－	－	－	－	－	－	○	－	－	○
	stretch	－	○	○	○	○	○	○	○	○	○
レガシー	legacy	－	－	－	－	－	○	－	－	－	－
	legacy left	－	－	－	－	－	○	－	－	－	－
	legacy right	－	－	－	－	－	○	－	－	－	－
	legacy center	－	－	－	－	－	○	－	－	－	－

safeとunsafe

start, end, flex-start, flex-end, self-start, self-end, center, right, left には、safe または unsafe をつけることができます。

safe: アイテムが開始方向にあふれそうな場合、溢れないように開始線に揃えます。Firefox でサポートされています。
unsafe: 規定値。アイテムが開始方向にあふれる場合でも、そのまま表示します。

CSS

.safe-contaier {
  margin-left: 3rem;
  display: flex;
  flex-direction: column;
  width: 5rem;
  height: 6rem;
  padding: .1rem;
  align-tems: center;
  border: 1px solid #ccc;
  background-color: #eee;
  align-items: safe center;
}
.safe-item {
  border: 1px solid #ccc;
  background-color: #fff;
  text-align: center;
  padding: .2rem;
}

CSS

<div class="safe-contaier">
  <span class="safe-item" xstyle="width:5rem">ABC</span>
  <span class="safe-item" xstyle="width:12rem">ABCDEFGHIJKLMN</span>
  <span class="safe-item" xstyle="width:5rem">XYZ</span>
</div>

動きを試してみる

フレックスボックス・グリッドに対して、それぞれの指定がどのように動作するかを試してみてください。Chrome よりも Firefox が比較的サポート範囲が広いです。IE の場合はフレックスボックスのみ試せます。

Flex

C
C

Grid

Flex Grid

justify-items:

justify-content:

align-items:

align-content:

初版:2020年1月5日最終更新:2024年12月22日

https://www.tohoho-web.com/ex/css-align.html