フレックス・グリッドのレイアウト
概要
フレックスボックス、グリッド、マルチカラム、ボックス等をレイアウトするために使用される、下記の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
関連仕様書
これらのプロパティは最初フレックスボックスの仕様の一部として定義されました。ここでは、プロパティとして justify-content, align-self, align-items, align-content のみが定義されています。値も auto, flex-start, flex-end, right, left, center, baseline, space-between, space-around, stretch のみが定義されています。
- [CSS-FLEXBOX-1] https://www.w3.org/TR/css-flexbox-1/ (勧告候補)
後に、フレックスボックスに加え、グリッド、マルチカラム、ボックスなどに対する汎用的な仕様として再定義されました。プロパティとして 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 が追加されました。
- [xCSS-ALIGN-3] https://www.w3.org/TR/css-align-3/ (勧告候補)
用語
親要素を コンテナ、子要素を アイテム と呼びます。
文字が並ぶ方向を 主軸、改行が進む方向を 交差軸 と呼びます。通常は左から右が主軸、上から下が交差軸です。アラビア語など文字を右から左に書く環境では主軸は右から左となります。日本語の縦書きでは主軸は上から下、交差軸は右から左となります。
レイアウトの対象
レイアウトの対象には下記のものがありますが、フレックスとグリッド以外は、まだブラウザの対応が追い付いていないため、ここではフレックスとグリッドについてのみ説明します。
- flex で作成するフレックスコンテナ。
- grid で作成するグリッドコンテナ。
- columns で作成するマルチカラムコンテナ。
- <table> で作成するテーブルセル。
- <div> などで作成するブロックボックス。
CSSプロパティの使い分け
justify- と align- と place- の違い
justify-* は主軸方向のレイアウトを制御します。align-* は交差軸方向のレイアウトを制御します。place-* は主軸と交差軸をまとめて指定します。
-self と -items と -content の違い
*-self はアイテムに直接指定します。*-items や *-content はコンテナに指定してその子アイテムのレイアウトを制御します。
.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
- 規定値。アイテムが開始方向にあふれる場合でも、そのまま表示します。
.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; }
<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 の場合はフレックスボックスのみ試せます。
C