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

トップ > アラカルト > フレックス・グリッドのレイアウト

概要

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

結論

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

◆フレックスの横方向の配置
◆フレックスの縦方向の配置
◆グリッドの横方向の配置
◆グリッドの縦方向の配置

関連仕様書

これらのプロパティは最初フレックスボックスの仕様の一部として定義されました。ここでは、プロパティとして justify-content, align-self, align-items, align-content のみが定義されています。値も auto, flex-start, flex-end, right, left, center, baseline, space-between, space-around, stretch のみが定義されています。

後に、フレックスボックスに加え、グリッド、マルチカラム、ボックスなどに対する汎用的な仕様として再定義されました。プロパティとして justify-self, justify-items, place-self, place-items, place-content が追加されました。値として normal, start, end, self-start, self-end, space-evenly, legacy, legacy left, legacy right, legacy center が追加されました。また、補足値として safe, unsafe が追加されました。

用語

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

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

レイアウトの対象

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

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 を継承します。正式勧告では削除されるかもしれません。
[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
A
B
C
C
D
E
F
G
H
I
Grid
1
2
3
4
5
6
7
8
9
Flex Grid
justify-items:
justify-content:
align-items:
align-content:

Copyright (C) 2020 杜甫々
初版:2020年1月5日 最終更新:2020年1月5日
http://www.tohoho-web.com/ex/css-align.html