1. はじめに
CSSレベル1と2では、text-alignによるテキストの整列や、autoマージンのバランスによるブロックの整列が可能でした。 しかし、テーブルセル以外では垂直方向の整列はできませんでした。 CSSがさらなる機能を追加するにつれ、 ボックスを様々な次元で整列させる能力がより重要になってきます。 このモジュールは、CSS全体で共有される一貫した共通のボックス整列モデルを作成しようとしています。
注: テキストやインラインレベルの内容の整列は [CSS-TEXT-3]および[CSS-INLINE-3]で定義されています。
注: 本仕様は、ここで定義されるプロパティが初期値に設定されている場合、 CSS2.1で定義された動作を変更することを意図していません。 実装者やその他の方が何らかの不一致に気付いた場合は、 CSSWGにエラーとして報告してください。
このセクション（上記）は規範的ではありません。
1.1. モジュール間の相互作用
このモジュールは、[CSS2]の第9章および第10章で説明されているブロックレイアウトモデルに、 新しい整列機能を追加し、過剰制約されたブロックレベルボックスのマージンの解決方法を再定義し、 そしてこれらの新しい整列プロパティが、vertical-alignを用いたテーブルセル内容の整列とどのように相互作用するかを定義します。 （[CSS2] 第17章で定義）
これらのプロパティが グリッドレイアウト[CSS-GRID-1]やフレキシブルボックスレイアウト[CSS-FLEXBOX-1]とどのように相互作用するかは、それぞれのモジュールで定義されています。 ここでのプロパティ定義は[CSS-FLEXBOX-1]（より小さく、早期の許容値のサブセットを持つ）での定義を上書きします。
このモジュールのプロパティは、::first-lineや::first-letter擬似要素には適用されません。
1.2. 値の定義
この仕様は、CSSプロパティ定義規約（[CSS2]）に従い、 値定義構文（[CSS-VALUES-3]）を使用しています。 この仕様で定義されていない値型はCSS値と単位[CSS-VALUES-3]で定義されています。 他のCSSモジュールとの組み合わせによって、これらの値型の定義が拡張される場合があります。
各プロパティの定義で挙げられているプロパティ固有の値に加え、 この仕様で定義されたすべてのプロパティは CSS全域キーワードもプロパティ値として受け付けます。 可読性のため明示的には繰り返していません。
1.3. 部分的な実装
このモジュールの機能のサポートは、 影響を受ける様々なレイアウトモデルに対応する段階で展開されると予想されるため、 部分的な実装のルール（サポートされていない機能を無効として扱うことを要求）が、 実装が一般的にプロパティをサポートするレイアウトモデル内で対象となるすべてのレイアウトモジュールでサポートされていない整列キーワードにも適用されることをここに明確にします。
例えば、 ある実装がalign-selfを[CSS-GRID-1]や[CSS-FLEXBOX-1]でサポートしている場合、 startはグリッドとフレックス両方のコンテナーでサポートされていない限り無効として扱わなければなりません。 ただし、その同じ実装がブロックレベル要素に対してalign-selfを全くサポートしていない場合は、 align-self: startの未実装はこの要件の対象にはなりません。
2. 整列プロパティの概要
ボックス整列プロパティはCSSの6つのプロパティのセットで、 ボックスの中で他のボックスを整列させる制御をします。 これらは2つの軸で説明できます：
注: この仕様では「justify」と「align」の用語を使い、 それぞれメイン／インライン軸と交差／ブロック軸の整列を区別しています。 この選択はやや任意ですが、2つの用語を持つことで CSSのすべてのレイアウトモデル（CSS Flexbox 1 § 2 フレックスレイアウトボックスモデルと用語を含む）で一貫した命名規則を提供できます。
次の表はボックス整列プロパティと、それらが適用可能なdisplay型をまとめたものです。
| 共通 | 軸 | 整列対象 | 適用先 |
|---|---|---|---|
| justify-content | メイン／インライン |  要素内の内容
（実質的にpaddingを調整）
| ブロックコンテナー、フレックスコンテナー、グリッドコンテナー |
| align-content | 交差／ブロック | ||
| justify-self | インライン |  親内の要素
（実質的にmarginを調整）
| ブロックレベルボックス、絶対配置ボックス、グリッドアイテム |
| align-self | 交差／ブロック | 絶対配置ボックス、フレックスアイテム、グリッドアイテム | |
| justify-items | インライン |  ボックス内のアイテム
（子アイテムのjustify-self: autoを制御）
| ブロックコンテナー、グリッドコンテナー |
| align-items | 交差／ブロック | フレックスコンテナー、グリッドコンテナー |
注: *-itemsプロパティは要素自体には影響しません。 コンテナーに設定した場合、 そのコンテナーの子要素に*-self: autoが使われている場合の解釈方法を指定します。
3. 整列用語集
このモジュールはCSSの全レイアウトモードに対して整列プロパティを定義するため、 抽象的な用語をいくつか導入します：
- 整列対象
- 整列対象は、そのプロパティによって整列されるものです。 justify-selfやalign-selfの場合、 整列対象はそのプロパティが設定されているボックスのマージンボックスであり、 そのボックスの書字モードを引き継ぎます。 justify-contentやalign-contentの場合、 整列対象はレイアウトモードで定義され、内容の一部を指します。 それもまたプロパティが設定されたボックスの書字モードを引き継ぎます。
- 整列コンテナー
- 整列コンテナーは、整列対象がその中で整列される矩形領域です。 これはレイアウトモードで定義されますが、 通常は整列対象のcontaining blockであり、 containing blockを確立するボックスの書字モードを引き継ぎます。
- フォールバック整列
- 一部の整列は特定の状況でのみ満たされるか、消費できるスペースに制限があります。 例えば、space-betweenは複数の整列対象がある場合のみ機能し、 ベースライン整列は満たされた後も余剰スペースを吸収しきれない場合があります。 このような場合、フォールバック整列が発動し （下記で定義） 余剰スペースを完全に消費します。
4. 整列キーワード
すべての整列プロパティは共通のキーワード値セットを使用し、 それらはこのセクションで定義されます。 キーワードは3つのカテゴリに分かれます：
- 位置整列
- これらのキーワードは、整列コンテナー内の絶対位置として整列を定義します。
- ベースライン整列
- これらのキーワードは、複数の整列対象のベースライン同士の関係として整列を定義します（整列コンテキスト内）。
- 分布整列
- これらのキーワードは、整列対象間のスペースの分布として整列を定義します。
4.1. 位置整列：center、start、end、self-start、self-end、flex-start、flex-end、left、right キーワード
位置整列キーワードは、整列対象をその整列コンテナーに対してどこに位置付けるか指定します。
値の意味は以下の通りです：
- center (self, content)
- 整列対象を整列コンテナーの中央に配置します。
- start (self, content)
- 整列対象を、該当軸における整列コンテナーの開始端に揃えます。
- end (self, content)
- 整列対象を、該当軸における整列コンテナーの終了端に揃えます。
- self-start (self)
- 整列対象を、該当軸の整列コンテナーの、整列対象の開始側に対応する端に揃えます。
- self-end (self)
- 整列対象を、該当軸の整列コンテナーの、整列対象の終了側に対応する端に揃えます。
- flex-start (self, content)
-
フレックスレイアウトのみで使用。 [CSS-FLEXBOX-1] 整列対象を、整列コンテナーの、フレックスコンテナーのmain-startまたはcross-start側に揃えます。
フレックスフォーマッティングコンテキスト以外で使う場合、この値はstartとして動作します。 つまり、フレックスアイテムでないボックス（または フレックスアイテムであるかのように振る舞う場合、例えば絶対配置ボックスの静的位置の決定時など）では、 自己整列プロパティで使用するとstartとして動作し、 フレックスコンテナーでないボックスでは 内容分布プロパティで使用するとstartとして動作します。
- flex-end (self, content)
-
フレックスレイアウトのみで使用。 整列対象を、整列コンテナーの、フレックスコンテナーのmain-endまたはcross-end側に揃えます。
フレックスフォーマッティングコンテキスト以外で使う場合、この値はendとして動作します。 つまり、フレックスアイテムでないボックス（または フレックスアイテムであるかのように振る舞う場合、例えば絶対配置ボックスの静的位置の決定時など）では、 自己整列プロパティで使用するとendとして動作し、 フレックスコンテナーでないボックスでは 内容分布プロパティで使用するとendとして動作します。
- left (justify-*のみ)
-
整列対象を、
整列コンテナーのline-leftまたは物理的left端に揃えます（該当軸に応じて）。
プロパティの軸がleft↔right軸と平行でない場合、この値はstartとして動作します。現在、プロパティ軸がleft↔right軸と平行でない唯一のケースはカラムフレックスボックスです。
- right (justify-*のみ)
-
整列対象を、
整列コンテナーのline-rightまたは物理的right端に揃えます（該当軸に応じて）。
プロパティの軸がleft↔right軸と平行でない場合、この値はstartとして動作します。現在、プロパティ軸がleft↔right軸と平行でない唯一のケースはカラムフレックスボックスです。
これらの値の特定のサブセットを示すために、2つの文法用語が使われます：
- <self-position>
-
このセットはjustify-selfやalign-selfでボックスを整列コンテナー内に揃える際に使い、justify-itemsやalign-itemsでも（justify-selfやalign-selfの初期値指定用）使います。
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end - <content-position>
-
このセットはjustify-contentやalign-contentでボックス内の内容を揃える際に使います。
<content-position> = center | start | end | flex-start | flex-end
注: leftとrightは、<self-position>や<content-position>のセットには含まれませんが、位置整列値としてjustify-content/justify-self/justify-itemsでは有効です。 これはalign-*プロパティには許可されていないためで、justify-*プロパティの文法に明示的に含まれています。
一方、Flexboxではjustify-*はメイン軸で、align-*は交差軸で整列します。 これはflex-direction値によって変わります。 flex-directionがrowやrow-reverseの場合は他のレイアウトモードと同じ （インライン軸でjustify-*、ブロック軸でalign-*）、 flex-directionがcolumnやcolumn-reverseの場合は逆対応になります。
「start」と「end」が直交フローに対して二軸であることをより分かりやすく説明する必要があります。
4.2. ベースライン整列：baselineキーワード とfirst/last 修飾子
CSS Writing Modes 3 § 4.1 ベースラインの概要を参照。
ベースライン整列は、 複数の整列対象を、共通整列コンテキスト （例：行内のセルなど）内で それぞれの整列ベースラインを揃えて配置する位置整列の一種です。 整列対象の位置がベースライン共有グループ内で ベースライン整列だけでは完全に制約されない場合（つまりベースラインを保ったまま各自の整列コンテナー内で移動可能な場合）、 可能な限りベースライン整列を保ちつつフォールバック整列が適用されます。
ベースライン整列キーワードは<baseline-position> という文法で表されます：
<baseline-position> = [ first | last ]? && baseline
firstやlast の値は、ボックスにベースライン整列の優先度（"first" か "last"）を与えます。デフォルトは "first" です。
それぞれの値の意味：
- baseline
- 下記で定義されるfirst baselineに算出されます。
- first baseline
-
first-baseline整列に参加することを指定します。
ボックスの整列ベースラインの
first baseline
setを、
ベースライン共有グループの対応するベースラインと揃えます。
詳細は§ 9.3 ボックスのベースライン整列を参照。
フォールバック整列は、 first baselineの場合、 safe self-start（自己整列の場合）、 safe start（内容分布の場合）です。
- last baseline
-
last-baseline整列に参加することを指定します。
ボックスの整列ベースラインの
last baseline setを、
ベースライン共有グループの対応するベースラインと揃えます。
詳細は§ 9.3 ボックスのベースライン整列を参照。
フォールバック整列は、 last baselineの場合、 safe self-end（自己整列の場合）、 safe end（内容分布の場合）です。
align-contentプロパティで指定された場合、 これらの値はベースライン内容整列を起動し、 ボックス内の内容がコンテンツボックス内で移動され、 ボックス自体のサイズにも影響する場合があります。 詳しくは§ 5.4 ベースライン内容整列を参照。
align-self/justify-selfで指定された場合、 これらの値はベースライン自己整列を起動し、 ボックス全体がコンテナー内で移動され、 コンテナーのサイズにも影響する場合があります。 詳しくは§ 6.4 ベースライン自己整列を参照。
ベースライン自己整列がボックスに指定された場合、 まず内容分布が行われ、 その結果のボックスと内容が自己整列されます。 ただし、同じ軸でベースライン内容整列も指定されている場合や、 同じ軸で内容分布プロパティがnormalの場合は、 その軸での使用値内容分布プロパティは、 startまたはsafe end （ベースライン整列の優先度がそれぞれ "first" か "last" の場合）となります。
ボックスが共通整列コンテキストに属していない場合は、 フォールバック整列が使用されます。 例えば、ブロックボックスでalign-content: baselineを指定すると、 start整列にフォールバックします。 フォールバック整列は、ベースライン共有グループを その整列コンテナー内で整列する場合にも使用されます。
注: 同値なので、baselineの方が短いため、 CSSOMはfirst baselineをbaselineとしてシリアライズします。 CSSOM § 6.7.2 CSS値のシリアライズ参照。
注: 関連するvertical-alignプロパティについては、 CSS2.1の設計の不統一により、baselineは first baselineと等価ではありません。 インラインレベルボックスのベースライン整列の優先度は、 displayによって変わります。 （例：inline-blockはデフォルトでlast baseline、 inline-tableはデフォルトでfirst baselineを使います。）
4.3. 分布整列：stretch、space-between、space-around、space-evenlyキーワード
分布整列値は、 justify-contentや align-contentで、 コンテナーの余剰スペースを整列対象に分散するために使われます。
スペースをこのように分散できない場合、 それぞれの値はフォールバック整列として動作します。 各分布値には既定のフォールバック整列が割り当てられています。 （モジュールの将来バージョンではフォールバック整列を明示指定できるようになるかもしれません。）
- space-between
-
整列対象は
整列コンテナー内で均等分布されます。
最初の整列対象はコンテナーの開始端に揃え、
最後の整列対象は終了端に揃え、
残りの整列対象は隣接する間隔が全て等しくなるように分布します。
この値の既定のフォールバック整列はsafe flex-startです。（フレックス以外のレイアウトモードでは、flex-startはstartと同一です。）
- space-around
-
整列対象は
整列コンテナー内で均等分布され、
両端には半分のスペースが付きます。
整列対象同士の間隔は全て等しく、
最初と最後の整列対象の前後のスペースは他と比べて半分になります。
この値の既定のフォールバック整列はsafe centerです。
- space-evenly
-
整列対象は
整列コンテナー内で均等分布され、
両端にも同じサイズのスペースが付きます。
整列対象同士の間隔、
最初の整列対象の前、
最後の整列対象の後の間隔も全て等しくなります。
この値の既定のフォールバック整列はsafe centerです。
- stretch
-
整列対象の合計サイズが整列コンテナーよりも小さい場合、
autoサイズの整列対象のサイズが均等に（比例ではなく）増やされ、
max-height/max-width（または同等機能）の制約も尊重しつつ、
合計サイズがちょうど整列コンテナーを満たすようになります。
この値の既定のフォールバック整列はflex-startです。（フレックス以外のレイアウトモードでは、flex-startはstartと同じです。）
注: この`align-content/stretch`の定義は内容分布プロパティについてです。 自己整列プロパティのjustify-self/align-selfには独自のstretch値があり、 整列対象のサイズを増やすだけでなく縮小することもできます、 整列コンテナーにぴったり合うようにします。
これらの値は<content-distribution>という文法で表されます：
<content-distribution> = space-between | space-around | space-evenly | stretch
4.4. オーバーフロー整列：safeおよびunsafeキーワードとスクロール安全制限
場合によっては、 指定通りに整列すると 整列対象がその 整列コンテナーから はみ出し、データ損失が発生することがあります。 たとえば、サイドバーの内容を無条件で中央揃えにした場合、 内容がサイドバーより大きいと、アイテムがビューポートの始端側まで突き抜けてしまい、 その部分はスクロールできなくなるかもしれません。
左の図のアイテムは、はみ出さない限り中央揃えになりますが、 はみ出した場合は余分が終端側にだけ流されます。 右の図では、アイテムは厳密に中央揃えされており、 長すぎるアイテムは両端にはみ出します。
もしコンテナーがページ左端に配置されていた場合、 「安全」な挙動の方が望ましく、 長いアイテムでも完全に読めます。 一方で他の場合には、 「安全でない」中央揃えの方が理想的なケースもあります。 アイテムが正確に中央揃えになるからです。
この状況を制御するために、 オーバーフロー整列 モードを明示的に指定できます。 「安全でない」揃えは、オーバーフローしていても指定の揃えモードを優先し、データ損失が発生する場合でもそのままにします。 一方「安全」揃えは、データ損失を避けるためにオーバーフロー時は揃えモードを変化させます。 デフォルトでは整列対象がスクロール領域内に収まるように挙動しますが、執筆時点ではこの安全機能はまだ実装されていません。
<overflow-position> = unsafe | safe
- safe
- 整列対象のサイズが 整列コンテナーを超えた場合、 整列対象は、揃えモードが flex-start であったかのように揃えられます。
- unsafe
- 整列対象と 整列コンテナーの サイズに関係なく、指定された整列値が優先されます。
- (値が指定されていない場合)
- オーバーフロー整列が明示的に指定されていない場合、 デフォルトの オーバーフロー整列は「安全」と「安全でない」の混合になります。 詳細は § 4.4.1 自動オーバーフロー整列安全性 を参照してください。
4.4.1. オーバーフロー整列の自動安全性
プロパティにオーバーフロー整列モードが指定されていない場合、 デフォルトの動作はsafeとunsafeの中間であり、レイアウトモードによっても異なります。
4.4.1.1. スクロールコンテナーの内容分布
内容分布に関する、 スクロールコンテナーの デフォルトオーバーフロー整列動作はunsafeです。 normal以外の内容分布プロパティ値は、 スクロール可能オーバーフロー領域を変更し、はみ出した内容へアクセスできるようにします。 詳しくは§ 5.3 整列のオーバーフローとスクロールコンテナーを参照。
4.4.1.2. 絶対配置ボックスの自己整列
絶対配置された 整列対象で、 該当する 使用済み 自己整列プロパティ が normal でない場合、 デフォルトの オーバーフロー整列 の挙動は以下の通りです：
-
整列対象が インセット修飾された包含ブロック内に収まる場合、 可能な限り指定通りに整列しつつ、 インセット修飾された包含ブロックから はみ出さないように整列する。
-
それ以外の場合、 整列対象が overflow limit rect 内に収まる場合は、 整列対象が インセット修飾された包含ブロックを完全に覆うように整列し、 それ以外は可能な限り指定通りに overflow limit rect からはみ出さないよう整列する。
-
それ以外の場合は、 整列対象を overflow limit rect の中で 始端揃えで整列する（safe と類似）。
この目的では、overflow limit rect は 整列対象の インセット修飾された包含ブロックと 元の包含ブロックの外接矩形です。 ただし スクロール可能なオーバーフロー領域が スクロールコンテナーによって 拡張され、絶対配置されたボックスが可視になる場合は、 元の包含ブロックが スクロールコンテナーによって生成されていて かつそれが 固定包含ブロックでない場合は、 overflow limit rect は、その方向に無限まで拡張され、 到達不可能なスクロール可能領域に達しない限り延長されます。
（上記条件を満たさない 絶対配置の 整列対象については、 § 4.4.1.3 その他の整列 を参照してください。）
注: これらのルールは、 ボックスの位置を制約し、 はみ出しを最小限にしつつ、 可能な限り指定された整列を実現し、 ボックスのサイズ変化に対して連続的な挙動となることを保証します。
4.4.1.3. その他の整列
その他の要素の場合：
その他のすべての要素について：
-
整列対象が 最も近い祖先の スクロール可能なオーバーフロー領域 （スクロールコンテナー）をはみ出す場合 （その方向に「スクロール不可領域」に拡張する場合）、 その方向におけるはみ出しは 残りのはみ出しを反対側に寄せることで制限される。
「スマート」なデフォルト挙動を実装することは Web 互換ではないかもしれない （そうであってほしいし、そうだと考えているが）ため、 UA はこの点についてのフィードバックを WG に送るべきです。 「スマート」なデフォルト挙動を実装していない UA は、 safe として動作しなければなりません （align-content が ブロックコンテナーに対して利用されている場合）、それ以外は unsafe として動作する必要があります。
5. 内容分布：ボックス内の内容の整列
内容分布は、 ボックス内の内容のコンテンツボックス内での整列を制御します。 内容分布プロパティalign-contentとjustify-content（およびplace-contentショートハンド）で指定します。
5.1. justify-contentおよびalign-contentプロパティ
| 名前: | align-content |
|---|---|
| 値: | normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> |
| 初期値: | normal |
| 適用対象: | ブロックコンテナー、マルチカラムコンテナー、フレックスコンテナー、グリッドコンテナー |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | 指定キーワード |
| 正規順序: | 文法に従う |
| アニメーション型: | 離散型 |
| 名前: | justify-content |
|---|---|
| 値: | normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] |
| 初期値: | normal |
| 適用対象: | マルチカラムコンテナー、フレックスコンテナー、グリッドコンテナー |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | 指定キーワード |
| 正規順序: | 文法に従う |
| アニメーション型: | 離散型 |
ボックス内の内容全体（整列対象）を、ボックス自体（整列コンテナー）内で揃えます： justify-contentはインライン／行／メイン軸沿い、 align-contentはブロック／列／交差軸沿い。 normal以外の値は、§ 4 整列キーワードで定義されています。
すべてのレイアウトモードにおいて、 整列対象と整列コンテナーは、 *-contentプロパティが設定されているボックスの書字モードを引き継ぎます。
5.1.1. ブロックコンテナー（テーブルセル含む）
| 整列コンテナー | ブロックコンテナーのコンテンツボックス。 |
|---|---|
| 整列対象 | ブロック全体の内容（ユニットとして扱う）。 |
| align-content軸 | ブロック軸。 <content-distribution>が指定された場合は フォールバック整列が使用される。 <overflow-position>が指定されていない場合、 かつブロックコンテナーがスクロールコンテナーでない場合、 整列はsafeとなる。 |
| justify-content軸 | ブロックコンテナーには適用されず、効果もない。 |
| normalの挙動 |
normal以外の値は
ブロックコンテナーに独立フォーマッティングコンテキストの確立を強制する。
テーブルセルの場合、align-content: normalの挙動は、vertical-alignの算出値に依存する：topならstartとして、 bottomならendとして動作する。 それ以外の場合middleならcenterとして、 その他の値はbaselineとして動作する。 [CSS2] それ以外の場合startとして動作する。 |
5.1.2. マルチカラムコンテナー
| 整列コンテナー | マルチカラムコンテナーのコンテンツボックス。 |
|---|---|
| 整列対象 | カラムボックス。 カラムボックス間に挿入される余白は、該当するカラムギャップに加算される。 |
| align-content軸 | ブロック軸。 カラムボックス（およびカラムをまたぐ要素）を単一ユニットとして扱う。 <content-distribution>が指定された場合は フォールバック整列が使用される。 |
| justify-content軸 | インライン軸。 |
| normalの挙動 |
normalはstretchとして動作する。
どちらも[CSS-MULTICOL-1]のカラムサイズ規則に従って定義される。
非autoのcolumn-widthを持つ場合、 justify-contentがnormalまたはstretch以外の値の場合、 カラムは指定されたcolumn-widthとなり、 コンテナーを埋めるようには伸びない。 その後、カラムボックスはjustify-contentで指定した通りに整列される。 |
5.1.3. フレックスコンテナー
| アライメントコンテナ | フレックスコンテナのコンテンツボックス。 |
|---|---|
| アライメントサブジェクト |
justify-contentに対しては、
各フレックスライン内のフレックスアイテム。
align-contentの場合は、 フレックスライン。 注意：これは複数行のフレックスコンテナでのみ有効です。 |
| align-content軸 | クロス軸。 |
| justify-content軸 | justify-contentプロパティはメイン軸に沿って適用されますが、 メイン軸のストレッチはflexで制御されるため、 stretchはflex-startとして動作します。 |
| normalの挙動 | normalはstretchとして動作します。 |
詳細は[CSS-FLEXBOX-1]参照。
5.1.4. グリッドコンテナー
| 整列コンテナー | グリッドコンテナーのコンテンツボックス。 |
|---|---|
| 整列対象 | 該当軸のグリッドトラック。 トラック間の余白は該当するガターに加算され、 折り畳みガターはスペース挿入の1つの機会として扱う。 |
| align-content軸 | ブロック軸で グリッド行を整列する。 |
| justify-content軸 | インライン軸で グリッド列を整列する。 |
| normalの挙動 | normalはstretchとして動作する。 |
詳細は[CSS-GRID-1]参照。
5.2. 内容分布ショートハンド：place-content プロパティ
| 名前: | place-content |
|---|---|
| 値: | <'align-content'> <'justify-content'>? |
| 初期値: | normal |
| 適用対象: | 個々のプロパティを参照 |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | 個々のプロパティ参照 |
| 正規順序: | 文法準拠 |
| アニメーション型: | 離散型 |
このショートハンドプロパティは、 align-contentとjustify-contentの両方を一括で設定する。 最初の値がalign-contentに、 2番目の値がjustify-contentに割り当てられる。 省略時は最初の値がコピーされるが、<baseline-position>の場合はデフォルトでstartとなる。
5.3. 整列のオーバーフローとスクロールコンテナー
コンテンツ分布プロパティが、 はみ出した 整列対象を持つ スクロールコンテナーに設定された場合、 到達不能なスクロールオーバーフロー領域の 切り取り領域を、整列対象が 始端に揃うようにスクロールできる分だけ減らします。
注: 整列対象は スクロール可能オーバーフロー領域と 必ずしも同一ではありません。 整列対象からはみ出したコンテンツ （例えば インフロー外ボックスなど）は スクロール可能オーバーフロー領域を 拡張しますが、整列対象自体は拡張されません。 つまり、終端揃えされた スクロールコンテナー でも、最初から一番下までスクロールされているとは限らず、 コンテンツがさらに 到達不能なスクロール可能オーバーフロー領域の奥まで 位置している場合、配置されたコンテンツが切り取られる可能性があります。 形成元となるインフローコンテンツ（in-flow）よりもさらに奥に配置された場合です。
この画像も置き換えてください。
注: スクロールバーが表示されることで スクロールコンテナーの 内容領域のサイズ （および 整列コンテナー や 整列対象のサイズ）も 変化することがあります。
5.4. ベースライン内容整列
行のようなレイアウトコンテキスト（共通整列コンテキスト）に参加するボックスの内容は、互いにベースライン整列できます。ベースライン内容整列は、ボックスのpaddingを効果的に増やし、 内容の整列ベースラインを 同じベースライン共有グループ内の他のベースライン整列ボックスと揃える役割を果たします。
ベースライン内容整列は、 align-content軸がボックスのブロック軸と平行な場合のみ適用できます （つまり「column」フレックスコンテナーには適用されません）； それ以外の場合はフォールバック整列が使用されます。
ベースライン内容整列に参加するボックスのセットは、レイアウトモデルによって異なります：
- テーブルセル:
-
(非置換)テーブルセルは、そのインライン軸がテーブル自体と平行であり、かつ
計算されたalign-contentがfirst
baseline（last baseline）であれば、開始/末端の行でベースライン内容整列に参加します。
注: 同じ列のセル同士のベースライン内容整列はサポートされていません。 ただし、需要と実装者の関心が十分あれば将来的に追加される可能性があります。
- フレックスアイテム:
- 非置換のフレックスアイテムは、 その計算されたalign-contentがfirst baseline/last baselineであり、かつ インライン軸がメイン軸と平行な場合、そのフレックスライン内でベースライン内容整列に参加します。
- グリッドアイテム:
- 非置換のグリッドアイテムは、 開始/末端の行または列（インライン軸に平行な方）で 計算されたalign-contentがfirst baseline/last baselineであればベースライン内容整列に参加します。
さらに、 ベースライン内容整列に参加するには、 協調自己整列優先度も必要です。 これは、ボックスがベースライン共有グループ内の他のボックスと関連する端を揃えることを保証するものです。 つまり、ボックスのstart（end）マージン端が 対応する端に揃えられること（かつ実際に揃うこと）が必要です。 ベースライン整列優先度が"first"（"last"）の場合、 ボックスのstart（end）端が揃うことが求められます。 それ以外の場合はフォールバック整列となります。
自己整列優先度が協調されるのはいつ？
ボックスのstartマージン端が、 containing blockの対応する端に揃えられ、 かつ「first」ベースライン整列優先度に対して 協調自己整列優先度がある場合、該当軸で：
-
該当軸にautoなマージンがなく、 該当する自己整列プロパティがstretchまたはself-startと同じ整列をしている場合、または
-
該当軸にautoなend端のマージンだけがあり、 そのマージンが正の余白を吸収し、自己整列プロパティの効果を無効化し、かつ margin boxが、containing blockからはみ出さない場合 （逆方向に揃う状況、例：containing blockの書字モードが反対の場合など）は end-align にはならず、first-align になる。
ボックスのendマージン端が containing blockの対応する端に揃えられ、 かつ「last」ベースライン整列優先度に対して 協調自己整列優先度がある場合、該当軸で：
-
該当軸にautoなマージンがなく、 該当する自己整列プロパティがself-endと同じ整列となり、かつ unsafeなオーバーフロー整列の場合、または
-
該当軸にautoなstart端のマージンだけがあり、 そのマージンが正の余白を吸収し、自己整列プロパティの効果を無効化し、かつ margin boxがcontaining blockからはみ出さない場合 （逆方向に揃う状況となる場合はstart-alignになる）。
詳細は§ 9.3 ボックスのベースライン整列を参照。ベースライン内容整列はボックスの本来的なサイズを増加させることがあります。
6. 自己整列：親内でのボックスの整列
自己整列は、 ボックスをcontaining block内でどう揃えるかを制御します。 自己整列プロパティ align-selfや justify-self（およびplace-selfショートハンド）で指定します。
6.1. インライン軸（またはメイン軸）自己整列：justify-selfプロパティ
| 名前: | justify-self |
|---|---|
| 値: | auto | <overflow-position>? [ normal | <self-position> | left | right ]
| stretch | <baseline-position> |
| 初期値: | auto |
| 適用対象: | ブロックレベルボックス、絶対配置ボックス、グリッドアイテム |
| 継承: | no |
| パーセンテージ: | 該当なし |
| 算出値: | 指定キーワード |
| 正規順序: | 文法通り |
| アニメーション型: | 離散値 |
ボックス（整列対象として）を、 その包含ブロック（整列コンテナーとして）の インライン／行／主軸に沿って揃えます： ボックスの外側の端はその 整列コンテナーの内部で、 整列値による説明に従って揃えられます。 値の意味は以下の通りです。
- auto
-
ボックスに親がない場合、または絶対配置ボックスの実際の位置を決定する場合は normal と同様に振る舞います。 それ以外の場合（絶対配置ボックスの静的位置を決定する場合も含む）は、 親ボックスの算出された justify-items の値 （legacy キーワードを除く） として振る舞います。
- normal
-
レイアウトモードの「デフォルト」整列を表します。 その挙動は、以下に記述するレイアウトモードに依存します。
- <self-position> | left | right
-
指定に従ってボックスの位置を移動します。 § 4 整列キーワード を参照してください。
- <overflow-position>
-
ボックスがはみ出した際の整列方法を制御します。 § 4.4 オーバーフロー整列: safe/unsafe キーワードとスクロール安全限界 を参照してください。
- stretch
-
ボックスの 算出された width/height （該当する軸において）が auto であり、 かつ（該当する軸の）マージンのいずれも auto ではない場合、 ボックスの使用サイズを、外側のサイズが 整列コンテナーを可能な限り満たすために必要な長さに設定します。 ただし min-height/min-width/max-height/max-width による制約は尊重します。
特に指定がない限り、この値は一般には flex-start にフォールバックし、 同じ軸で first baseline または last baseline の baseline content-alignment を指定している場合は、それぞれ self-start または self-end にフォールバックします。
注: stretch キーワードは、コンテナーに収まるように要素を縮小させることがあります。
- <baseline-position>
-
ベースライン自己整列を示します。 詳細は § 4.2 Baseline Alignment: the baseline keyword and first/last modifiers、 § 6.4 Baseline Self-Alignment、 および § 9 Baseline Alignment Details を参照してください。
stretch 以外の値は、 width/height が auto の場合に fit-content として扱います。
注: auto マージンは、 実質的にマージン領域のサイズを調整するため、 justify-self より優先されます。
6.1.1. ブロックレベルボックス
| justify-self 軸 | 一般に、ブロックの 包含ブロックの インライン軸。 静的位置の包含ブロックの インライン軸（静的位置を決定する際）。 |
|---|---|
| 整列コンテナー | ボックスの 包含ブロック。 ただし、ブロック整形コンテキストを確立し、 フロートの隣に配置されるブロックレベル要素については、 フロートが占有する空間分だけ 整列コンテナーが縮小されます。 これは 書字方向を包含ブロックのものと仮定します。 |
| 整列対象 | ブロックのマージンボックス。 ブロックの 書字方向を仮定します。 |
| normal の挙動 | ボックスはブロックレイアウトの既定ルールに従ってレイアウトされます （CSS2.1§10.3 を参照）。 |
| その他の詳細 |
ブロックレベルボックスで、
justify-self が normal
でない場合の
自動サイズは、
（例えば stretch ではなく、非置換の
ブロックレベルボックスに典型的ですが）
fit-content と同等です。
さらに、
CSS2.1 のブロックレベル整形 [CSS2] の観点では、
10.3.3 節 の「過剰制約」計算の規則は
ここで規定する整列を優先して無視され、
そのためマージンプロパティの使用値は過剰制約を補正するために調整されません。
このプロパティはフロートには適用されません。 無名ブロックボックスは常に normal として振る舞います。 |
6.1.2. 絶対配置ボックス
このセクションでは、絶対配置ボックスのマージンボックスが （絶対配置の）包含ブロックに対して justify-self によって どのように位置されるかを説明します。
| justify-self 軸 | ブロックの包含ブロックの インライン軸。 |
|---|---|
| 整列コンテナー | ボックスの 包含ブロック。 inset プロパティ (top/right/bottom/left) によって 修正されます。（包含ブロックの書字方向を仮定します。） 該当する軸の inset プロパティが両方とも auto の場合、 ボックスの 静的位置矩形 を使用します （すなわち、両インセットをボックスの 静的位置 に設定）、 静的位置包含ブロックの 書字方向を仮定します。 |
| 整列対象 | ボックスのマージンボックス。 ボックスの 書字方向を仮定します。 |
| normal の挙動 | ボックスの種類によって stretch または start として振る舞います。 CSS Positioned Layout 3 § 4 Absolute Positioning Layout Model を参照。 |
| その他の詳細 |
CSS2.1 のフォーマット [CSS2] の観点では、
10.3.7 節 の
「過剰制約」計算の規則は
ここで規定する整列を優先して無視され、
そのため inset プロパティの使用値は
制約を補正するために調整されません。
stretch または normal 以外の値は、 非置換の絶対配置ボックスに対し 該当する軸の auto サイズの計算に fit-content sizing を使用します。 stretch は 置換された絶対配置ボックスでも 非置換のものと同様に その包含ブロックを満たすことになることに注意してください。 注: インセットプロパティのうち一方のみが auto の場合、 CSS2 10.3.7 節 に従ってサイズと位置が完全に決まり、 justify-self は効果を持ちません。 （両方 auto の場合は、 ボックスは静的位置され、 上記を参照、 静的位置矩形内で揃えることができます。） |
6.1.3. テーブルセル
このプロパティはテーブルセルには適用されません。 セルの位置・サイズはテーブルレイアウトによって完全に制約されるためです。
6.1.4. フレックスアイテム
このプロパティはフレックスアイテムには適用されません。 メイン軸に複数アイテムが存在するためです。 伸縮についてはflex、 メイン軸の整列はjustify-contentで制御します。[CSS-FLEXBOX-1]
6.1.5. グリッドアイテム
| justify-self 軸 | グリッドの インライン軸。 |
|---|---|
| 整列コンテナー | グリッドアイテムの グリッド領域。 グリッドコンテナーの書字方向を仮定します。 グリッドコンテナー。 |
| 整列対象 | グリッドアイテムのマージンボックス。 グリッドアイテムの書字方向を仮定します。 |
| normal の挙動 | 一般的なstretch（非置換要素）または 一般的なstart（置換要素）としてサイズされます。 詳細は Grid Item Sizing（[CSS-GRID-1]）を参照してください。 得られるボックスは始端揃えされます。 |
詳細は[CSS-GRID-1]参照。
6.2. ブロック軸（または交差軸）自己整列：align-selfプロパティ
| 名前: | align-self |
|---|---|
| 値: | auto | <overflow-position>? [ normal | <self-position> ] | stretch | <baseline-position> |
| 初期値: | auto |
| 適用対象: | フレックスアイテム、グリッドアイテム、絶対配置ボックス |
| 継承: | no |
| パーセンテージ: | 該当なし |
| 算出値: | 指定キーワード |
| 正規順序: | 文法通り |
| アニメーション型: | 離散値 |
ボックス（整列対象として）を、 その包含ブロック（整列コンテナーとして）の ブロック／カラム／交差軸に沿って揃えます： ボックスの外側の端は、その 整列コンテナーの内部で 整列値による説明に従って揃えられます。 値の意味は以下のとおりです。
- auto
-
ボックスに親がない場合、または絶対配置ボックスの実際の位置を決定する場合は normal として振る舞います。 それ以外の場合（絶対配置ボックスの静的位置を決定する場合も含む）は、 親ボックスの算出 align-items の値 （legacy キーワードを除く）として振る舞います。
- normal
-
下記で定義されるレイアウトモードの “デフォルト” の整列を表します。
- <self-position>
-
指定に従ってボックスの位置を移動します。 § 4 整列キーワード を参照してください。
- <overflow-position>
-
ボックスがはみ出した際の整列方法を制御します。 § 4.4 オーバーフロー整列: safe/unsafe キーワードとスクロール安全限界を参照してください。
- stretch
-
justify-self について § 6.1 インライン軸（または主軸）自己整列: justify-self プロパティで定義されています。
- <baseline-position>
-
ベースライン自己整列を示します。 詳細は § 4.2 ベースライン整列: baseline キーワードと first/last 修飾子、 § 6.4 ベースライン自己整列、 および § 9 ベースライン整列詳細 を参照してください。
注: auto マージンは 実質的にマージン領域のサイズを調整するため、 align-self より優先されます。
6.2.1. ブロックレベルボックス
align-selfプロパティはブロックレベルボックス（フロート含む）には適用されません。 ブロック軸に複数アイテムが存在するためです。
6.2.2. 絶対配置ボックス
このセクションは、align-selfが 絶対配置ボックスのmargin boxが （絶対配置）containing blockに対してどのように配置されるかに及ぼす影響を説明します。
| align-self軸 | ボックスのcontaining blockのブロック軸。一般的にはこれ。 static-position containing blockのブロック軸は、静的位置を決定する場合に利用されます。 |
|---|---|
| 整列コンテナー | ボックスのcontaining block。 insetプロパティ（top/right/bottom/left）で修正される containing blockの書字モードを引き継ぎます。 該当軸の両方のinsetプロパティがautoの場合、 ボックスのstatic-position rectangle（両insetをボックスの静的位置にセット）を用い、 static-position containing blockの 書字モードを引き継ぎます。 |
| 整列対象 | ボックスのmargin boxであり、ボックスの書字モードを引き継ぎます。 |
| normal の挙動 | ボックスの種類によって、stretchまたはstartとして動作する。 詳しくは CSS Positioned Layout 3 § 4 絶対配置レイアウトモデル を参照。 |
| その他の詳細 |
CSS2.1 のフォーマットに関しては [CSS2]、
10.6.4節
の「過剰制約」計算の規則は
ここで指定された整列を優先し、
insetプロパティの使用値は
制約を補正するために調整されません。
stretch または normal 以外の値は、 非置換の絶対配置ボックスの 該当する軸の fit-content sizing を用いて auto サイズを計算します。 stretch は置換された 絶対配置ボックスにも 非置換ボックスと同様に その包含ブロックを埋めることに 注意してください。 注: insetプロパティのうち 一方のみが auto の場合、 CSS2 10.6.4節 の計算によって サイズと位置が完全に決定され、 align-self は効果を持ちません。 （両方 auto の場合は、 ボックスは静的位置になり、 上記を参照、 静的位置矩形内で整列できます。） |
6.2.3. テーブルセル
このプロパティはテーブルセルには適用されません。 セルの位置・サイズはテーブルレイアウトによって完全に制約されるためです。
6.2.4. フレックスアイテム
| align-self軸 | フレックスコンテナーの交差軸。 |
|---|---|
| 整列コンテナー | フレックスライン（フレックスアイテムが属する行）。 書字モードはフレックスコンテナーのものを引き継ぐ。 |
| 整列対象 | フレックスアイテムのmargin box。 フレックスアイテムの書字モードを引き継ぐ。 |
| normalの挙動 | stretchとして動作する。 |
詳細は[CSS-FLEXBOX-1]参照。
6.2.5. グリッドアイテム
| align-self軸 | グリッドのブロック軸。 |
|---|---|
| 整列コンテナー | グリッドアイテムのグリッドエリア。 書字モードはグリッドコンテナーのものを引き継ぐ。 |
| 整列対象 | グリッドアイテムのmargin box。 グリッドアイテムの書字モードを引き継ぐ。 |
| normalの挙動 | サイズは stretch （典型的な 非置換要素）、 または start （典型的な 置換要素）として決定されます。 グリッドアイテムのサイズ ([CSS-GRID-1]) を参照してください。 得られたボックスは始端揃えされます。 |
詳細は[CSS-GRID-1]参照。
6.3. 自己整列ショートハンド：place-selfプロパティ
| 名前: | place-self |
|---|---|
| 値: | <'align-self'> <'justify-self'>? |
| 初期値: | auto |
| 適用対象: | 個々のプロパティを参照 |
| 継承: | no |
| パーセンテージ: | 該当なし |
| 算出値: | 個々のプロパティを参照 |
| 正規順序: | 文法通り |
| アニメーション型: | 離散値 |
このショートハンドプロパティは、 align-self プロパティと justify-self プロパティ の両方を一度に設定します。 最初の値は align-self に割り当てられます。 2番目の値は justify-self に割り当てられます。 省略した場合は、最初の値がコピーされます。
6.4. ベースライン自己整列
行のようなレイアウトコンテキスト（共通整列コンテキスト）に参加するボックス同士は、 ベースラインで互いに揃えることができます。ベースライン自己整列は、ボックスのマージンを効果的に増やし、 ボックスの整列ベースラインを 同じベースライン共有グループ内の他のベースライン整列ボックスと揃える役割を果たします。
ベースライン自己整列に参加するボックスのセットはレイアウトモデルによって異なります：
- フレックスアイテム:
- フレックスアイテムは、 計算されたalign-selfがfirst baseline/last baselineであれば、そのフレックスライン内でベースライン自己整列に参加します。 詳細は[CSS-FLEXBOX-1]参照。
- グリッドアイテム:
- グリッドアイテムは、 開始/末端行または列でalign-selfまたはjustify-selfプロパティがそれぞれfirst baseline/last baselineとなる場合ベースライン自己整列に参加します。
詳細は§ 9.3 ボックスのベースライン整列を参照。ベースライン自己整列はボックスの本来的なサイズ寄与を増加させることがあります。
6.5. 静的位置インセットを持つ絶対配置ボックスのサイズへの効果
インライン軸オフセットが両方ともautoの絶対配置ボックスについては、 利用可能なスペースも整列によって影響を受けます。
注: [CSS2]では、利用可能なスペースはdirectionプロパティで static-position containing blockを決定します。 （CSS2§10.3.7とCSS2§10.3.8参照。） 基本的にこれらのルールは、一方のautoインセット （通常は開始端のインセット）をstatic-position rectangleの対応する端に揃え、 もう一方はcontaining blockの対応する端（つまりインセットをゼロ）に揃えます。 自己整列プロパティは、placementのためのcontaining blockのdirection参照を置き換えるだけでなく、 ここで定義するように、サイズ決定の参照も置き換えます。
したがって、 CSS2§10.3.7 および CSS2§10.3.8 の規則を解釈する際には、 direction プロパティが 静的位置の包含ブロックについて参照されている箇所では、 その軸に適用されると定義された align-self または justify-self プロパティの値を 参照してください。 左相当の整列は ltr の定義通り、 右相当の整列は rtl の定義通り扱います。 normal は start として扱い、 分布整列値は それぞれの フォールバック整列 として扱ってください。
center 整列の場合、 ボックスの 利用可能なスペースは、 静的位置矩形の中心と 該当軸における最も近い 包含ブロックの端との距離の 2倍になります。
注: align-selfやjustify-selfプロパティは サイズ決定の追加側面にも影響を与える可能性があります。 例えばjustify-self: stretchは fit-contentによる「縮めてフィット」サイズ計算を 利用可能なスペース全体を消費する stretch-fit sizingに置き換えることができます。 これはここで説明している利用可能スペース調整とは独立した効果です。
注: これは、絶対配置ボックスのサイズ決定時の利用可能なスペースの計算方法だけに影響します。 配置自体は前節で説明した通りです。
7. デフォルト整列
align-itemsとjustify-itemsプロパティ （およびplace-itemsショートハンド）は、 要素の子ボックスに対するデフォルトのalign-selfおよびjustify-selfの挙動を設定します。
7.1. インライン軸（またはメイン軸）のデフォルト整列：justify-itemsプロパティ
| 名前: | justify-items |
|---|---|
| 値: | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ] |
| 初期値: | legacy |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | 指定キーワード。ただしlegacy （本文参照）は除く |
| 正規順序: | 文法準拠 |
| アニメーション型: | 離散型 |
このプロパティは、このボックスのフォーマッティングコンテキストに参加するすべての子ボックス （匿名ボックスを含む） のデフォルトjustify-selfを指定します。 各値の意味：
- legacy
-
このキーワードは値が実質的に子孫に継承されるようにします。
legacyキーワードが単独で （left、right、centerキーワードが付かずに）現れる場合： justify-itemsの継承値がlegacyキーワードを含む場合は、 この値は継承値に算出されます。 含まない場合はnormalに算出されます。
justify-self:autoがjustify-itemsの値を参照する場合、 参照されるのは整列キーワードのみであり、legacy キーワードは参照されません。 これはHTMLの
<center>要素やalign属性のレガシー整列挙動を実現するためのものです。
その他の値は特別な処理はなく、justify-selfに参照されます。
7.2. ブロック軸（または交差軸）のデフォルト整列：align-itemsプロパティ
| 名前: | align-items |
|---|---|
| 値: | normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] |
| 初期値: | normal |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | 指定キーワード |
| 正規順序: | 文法準拠 |
| アニメーション型: | 離散型 |
このプロパティは、このボックスのフォーマッティングコンテキストに参加するすべての子ボックス （匿名ボックスを含む） のデフォルトalign-selfを指定します。
値は特別な処理はなく、align-selfに参照されます。
7.3. デフォルト整列ショートハンド：place-itemsプロパティ
| 名前: | place-items |
|---|---|
| 値: | <'align-items'> <'justify-items'>? |
| 初期値: | 個々のプロパティ参照 |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | 個々のプロパティ参照 |
| 正規順序: | 文法準拠 |
| アニメーション型: | 離散型 |
このショートハンドプロパティは align-itemsとjustify-itemsの両方を一度でセットします。 最初の値はalign-itemsに、 2番目の値はjustify-itemsに割り当てられます。 省略された場合は最初の値がコピーされます。
8. ボックス間の隙間
marginやpaddingは、個々のボックスの周囲の視覚的なスペース指定に使えますが、 レイアウトコンテキスト内で隣接するボックス同士の間隔を一括指定したい場合もあります。 特に兄弟ボックス同士の間隔と、最初／最後のボックスとコンテナー端の間隔を区別したい場合に便利です。
gapプロパティ、 およびrow-gap・column-gapサブプロパティは、 マルチカラム、フレックス、 グリッドレイアウトに対してこの機能を提供します。
8.1. 行・列のガター：row-gapとcolumn-gapプロパティ
| 名前: | row-gap, column-gap |
|---|---|
| 値: | normal | <length-percentage [0,∞]> |
| 初期値: | normal |
| 適用対象: | マルチカラムコンテナー、フレックスコンテナー、グリッドコンテナー |
| 継承: | no |
| パーセンテージ: | § 8.3 gapプロパティにおけるパーセンテージ参照 |
| 算出値: | 指定キーワード。そうでなければ算出<length-percentage>値 |
| 正規順序: | 文法準拠 |
| アニメーション型: | 算出値型による |
これらのプロパティはコンテナー内のアイテム間の固定長ガターを指定し、間にスペースを追加します。 これはspace-betweenキーワードや 内容分布プロパティと似ていますが、 余剰スペースの分割ではなく固定サイズです。 column-gapプロパティは「カラム」間のスペース、 コンテナーのインライン軸で ボックスを分離し、インライン軸marginのような役割を持ちます。 row-gapは「行」間のスペース、 コンテナーのブロック軸で ボックスを分離します。
各値の意味：
- <length-percentage [0,∞]>
-
「行」や「カラム」の間の隙間を指定します。 適用されるレイアウトモードで定義されます。 詳細は下記各節参照。
負の値は無効です。 パーセンテージについては§ 8.3 gapプロパティにおけるパーセンテージ参照。
- normal
-
normalは マルチカラムコンテナーでは使用値が1em、 それ以外の文脈では0pxとなります。
ガターはアイテム間の最小スペースとなり、 justify-contentやalign-contentによって追加スペースが加えられる場合があります。 その場合、ガターのサイズが事実上増加します。
これらのプロパティの厳密な扱いはレイアウトコンテナーごとに異なります：
- マルチカラムコンテナー
- column-gapは隣接するガターを指定します。 詳細は[CSS-MULTICOL-1]参照。row-gap はガターを、column boxesで確立される行間に指定します。 詳細はcolumn-heightおよび[CSS-MULTICOL-2]参照。
- フレックスコンテナー
-
主軸（例えば、row column-gap
を フレックスコンテナーに適用した場合）で使用すると、
アイテム同士のガター（中間余白）を示します
（隣接する フレックスアイテムの間に
追加の固定サイズのマージンが挿入されたかのような動作になります
（1行内で））。
交差軸 （例えば row row-gap を フレックスコンテナーに適用した場合）では、 隣接する ガター（余白）は フレックスライン同士の間に入ります。
- グリッドコンテナー
- row-gap や column-gap のプロパティは、 グリッドコンテナーで指定された場合、 ガター（余白）を それぞれ グリッド行や グリッド列同士の間に入れます。 詳細は CSS Grid Layout 1 § 10.1 ガター: row-gap, column-gap, gap プロパティ を参照してください。
全ての場合において、 ガター（余白）は 分割点と一致すると消失します。 [CSS-BREAK-3]
注: テーブルボックスでは、gap プロパティによるセル間の分離は行われません。 border-spacing プロパティを使用し、 これは機能が若干異なります： このプロパティは継承され、 テーブルの最外部セルと表の枠との追加の間隔も指定します （space-evenly に似ていますが、 space-between とは少し違います）。
8.2. ギャップ・ショートハンド：gapプロパティ
| 名前: | gap |
|---|---|
| 値: | <'row-gap'> <'column-gap'>? |
| 初期値: | 個々のプロパティ参照 |
| 適用対象: | マルチカラムコンテナー、フレックスコンテナー、グリッドコンテナー |
| 継承: | no |
| パーセンテージ: | コンテンツ領域の該当寸法に基づく |
| 算出値: | 個々のプロパティ参照 |
| 正規順序: | 文法準拠 |
| アニメーション型: | 算出値型による |
このプロパティはショートハンドであり、row-gapとcolumn-gapを一括で指定します。 <'column-gap'>を省略した場合、 <'row-gap'>と同じ値が設定されます。
注: gapプロパティは ボックス間にできる「ガター」や「路地」の目に見える一要素に過ぎません。 margin、padding、分布整列を使うことで、 gapで指定した以上に ボックス間の見た目の間隔が広がる場合があります。
8.3. gapプロパティのパーセンテージ指定
一般に、 gapプロパティで導入されるギャップは 空のアイテム・トラック等がギャップのサイズ分あるかのように機能します。 つまり、作者は追加の空アイテムやトラック等をコンテナーに挿入することで gapと同じ効果を再現できます。
gapのパーセンテージ指定は 常に要素のcontent boxの該当寸法を基準に解決されます。 このサイズが明確な場合は、 動作は定義通りであり、レイアウトモード問わず一貫しています。 ただし、レイアウトモードによってアイテム・トラック等の循環パーセンテージサイズの扱いが異なるため、 gapもそれに準じます：
- グリッドレイアウトの場合
-
min sizeプロパティやmargin/paddingと同様 [CSS-SIZING-3]、 循環パーセンテージサイズは本来的なサイズ寄与決定時はゼロを基準とし、 ボックスの内容配置時はcontent boxを基準として解決されます。
- フレックスレイアウトの場合
-
循環パーセンテージサイズはすべてのケースでゼロを基準として解決されます。
8.4. レガシーギャッププロパティ：grid-row-gap、grid-column-gap、grid-gapプロパティ
Grid Layoutモジュールは当初、ガター用に独自プロパティを持っていましたが、 その後、既存のrow-gapやcolumn-gapに統一されました。 互換性維持のため、これらのgrid接頭辞付き名称も以下のようにサポートされます：
-
grid-row-gapは、レガシー名称エイリアスとして、row-gapプロパティと同義とします。
-
grid-column-gapは、レガシー名称エイリアスとして、column-gapプロパティと同義とします。
-
grid-gapは、レガシー名称エイリアスとして、gapプロパティと同義とします。
9. ベースライン整列詳細
ベースライン共有グループ内のボックスは、 互いに整列ベースラインを使って整列されます。 例えば、横書きモードでは、同じ行のテーブルセルにalign-content: baselineを指定すると、 それらの最初の整形行のベースラインが揃います。 この章では、多様なベースラインや国際化CSSにおける書字モードを考慮したベースライン整列の厳密な定義を示します。
ベースラインセットは、 共通のベースラインテーブルに紐づく（アルファベット・中央など）複数のベースライン集合です。 組版の伝統的な慣習では通常ひとつが使われますが、書記体系によって異なり、 複数の書記体系が混在する場合、1行内で複数ベースラインが使われることもあります。 ベースラインや書字モードの詳細はCSS Writing Modes 3 § 4.1 ベースラインの概要参照。
9.1. ボックスのベースライン決定
各ボックスは、 ある軸について、 first baseline set（およびlast baseline set） を持っている可能性があり、 これはそのボックス内の最初／最後のテキスト行のベースラインセットと名目的に対応します。 整列ベースラインは、 ボックスが整列コンテキスト内で整列に使われるベースラインであり、 ベースラインセットの一つです。 通常はそので支配的なベースラインとなります。 （dominant-baselineやalignment-baselineプロパティについては[CSS-INLINE-3]参照。）
ボックスのfirst/lastベースラインセットは、 レイアウトモデルごとに以下のように決定されます：
- 行ボックス
- 行ボックスの最初／最後の ベースライン集合 は、 主要ベースラインと、その ルートインラインボックス のフォント設定から 生成 されます。
- ブロックコンテナー
-
ブロックコンテナーの最初／最後の ベースライン集合 は、
そのブロックコンテナー内で最初／最後の インフロー行ボックス、
またはブロックコンテナー内で最初／最後に
最初／最後のベースライン集合を持つ
インフローブロックレベル子要素から取得され、
どちらが先／後で現れるかによります。
そのような行ボックスや子要素が存在しない場合、
そのブロックコンテナーは ベースライン集合 を持ちません。
ただしレガシー理由により、 その baseline-source が auto（初期値） の場合、ブロックレベル や インラインレベル の ブロックコンテナー が スクロールコンテナーであれば、 常に 最後のベースライン集合 を持ちます。 そのベースラインは block-end の マージンエッジに対応します。
- マルチカラムコンテナー
-
マルチカラムコンテナーの最初の ベースライン集合 は、
カラムや マルチカラムスパナーで、
もっとも高い（block-start側）ベースラインが
マルチカラムコンテナーの
整列ベースライン
に対応するものになります。
そのような行ボックスや子要素が存在しない場合、
マルチカラムコンテナーは最初の ベースライン集合 を持ちません。
最後の ベースライン集合 も同様で、 ただし 最後 の ベースライン集合、 および もっとも低い（block-end側）ベースラインを使用します。
- テーブル
-
テーブルボックスの最初／最後の ベースライン集合 は、
その最初／最後の行の ベースライン集合 に対応します。
インラインブロックの最初／最後のベースライン集合を求める際、 テーブルボックスによるベースラインは除外します。 （この仕様は [CSS2] のレガシー挙動です。）
- テーブル行
-
行内のセルが
first baseline /
last baseline 揃えに
インライン軸で参加している場合、
行の最初／最後の ベースライン集合 は、
それらの共有 整列ベースライン
と行の 利用可能な最初のフォントから、整列後に 生成 されます。
それ以外の場合は、
行の最初／最後の ベースライン集合は
行内のセルの最も低い／高いコンテンツエッジから 合成されます。
[CSS2]
セルが複数行にまたがっている場合、 first baseline / last baseline の目的では セルがまたがる最初／最後の行のみ参加します。
- フレックスコンテナー
- Flex Baselines （[CSS-FLEXBOX-1]）を参照してください。
- グリッドコンテナー
- Grid Baselines （[CSS-GRID-1]）を参照してください。
ベースライン生成：ボックスに単一ベースラインからベースラインセットを生成するには、 そのボックスのフォント設定と利用可能な最初のフォントでベースラインテーブルを使い、 そのベースラインセットを与えられた単一ベースラインに揃えます。
ベースライン整列に参加するボックスがベースラインセットを持たない場合、 その整列ベースラインは 参加するフォーマッティングコンテキストのルールに従って合成されます。 ベースライン合成：矩形（または平行な2本の線）から合成する場合は、 alphabeticベースラインはline-underの線から、 centralベースラインは2端・線の位置の平均で求めます。 その他のベースラインの合成規則はCSS Inline Layout 3 § A Synthesizing Alignment Metrics参照。
注: ボックスからベースラインを合成する際に使う端は、 フォーマッティングコンテキストによって異なります： インラインレベルボックスはmargin edgeから合成（[CSS-INLINE-3]）、 テーブルセルはcontent edgeから合成（[CSS2]）、 グリッド・フレックスアイテムはborder edgeから合成（[CSS-GRID-1] [CSS-FLEXBOX-1]）。
一般に、整列対象となるボックスや図形・オブジェクトの書字モードを使って、 line-underや line-over端を決定します。 ただし、その書字モードのブロックフロー方向が整列コンテキストの軸と平行な場合、 軸互換の書字モードを仮定しなければなりません：
-
整列コンテキストを確立するボックスの整列コンテキストのブロックフロー方向が の軸に対して直交している場合は、 その書字モードを使う。
-
それ以外の場合：
-
ボックス自身の書字モードが縦書きなら horizontal-tbと仮定する。
-
ボックス自身の書字モードが横書きなら vertical-lr（directionがltrの場合）、 vertical-rl（directionがrtlの場合）と仮定する。
-
ボックスのベースラインを求める目的では、 ボックス自身およびそのインフロー下位要素（スクロール機構を持つもの、overflow プロパティ参照） は、初期スクロール位置までスクロールされたものとして扱う必要があります。 さらに、 スクロールコンテナーの最初／最後のベースラインの位置が その枠線エッジの外側にある場合、 そのベースライン位置は枠線エッジにクランプされます。
9.2. ベースライン整列グループ化
ベースライン共有グループは、 一緒にベースライン整列を行うボックス群で構成されます。 これは以下の両方を満たす場合に限り可能です：
- 軸が直交する整列コンテキスト（alignment context）を共有していること。 （例：align-self: baselineのグリッドアイテムはグリッドのブロック軸でベースライン整列し、 その行の他アイテムとグループになる。）
- 互換性のあるベースライン整列優先度を持つこと（揃えたいベースラインが整列コンテキストの同じ側にあること）。
注: ベースライン内容整列に参加するボックスと ベースライン自己整列に参加するボックスは同じベースライン共有グループとなり得るため、互いに整列できます。 両者の違いは、整列のための余白がボックス内部か外部かにあります。
ボックスは、特定の軸に沿って特定のボックスによって確立された整列コンテキストを共有する場合、以下の条件を満たします：
- 同じ行内のテーブルセル（テーブルの行（インライン）軸、rowボックスが確立）
- 同じ行内のグリッドアイテム（グリッドの行（インライン）軸、grid containerが確立）
- 同じ列内のグリッドアイテム（グリッドの列（ブロック）軸、grid containerが確立）
- 同じフレックスライン内のフレックスアイテム（フレックスコンテナーのメイン軸、flex containerが確立）
注: 概念的には、line box内のインラインレベルボックスも自己整列コンテキストを共有し、 ベースライン共有グループに参加します。 ただし、これらがベースライン整列するのはvertical-alignプロパティによる場合のみであり、 本モジュールで定義されたプロパティではありません。 詳細は[CSS-INLINE-3]参照。
ボックスが複数の整列コンテキストにまたがる場合、 その軸の開始端／終了端ので first/lastベースライン整列に参加します。 例：3行にまたがるテーブルセルはfirst-baseline整列では最初の行、 last-baseline整列では最後の行のセルと整列します。
同じベースライン共有グループ内の2つのボックスのベースライン整列優先度が互換性ありとなるのは、以下のいずれかの場合です：
-
同じブロックフロー方向かつ同じベースライン整列優先度
-
反対のブロックフロー方向かつ反対のベースライン整列優先度
9.3. ボックスのベースライン整列
一組の整列対象と それらのベースラインが同じ ベースライン共有グループに属する場合、 整列対象のベースライン整列方法は以下の通りです：
-
グループの ベースライン共有グループのベースラインテーブルを、 その 最初に利用可能なフォントおよび 整列コンテキストから生成し、 さらにこのベースラインテーブルのミラーも作り中央ベースラインで整列します。 これらが 整列対象がそろうベースライン「グリッド」となります。
-
各 整列対象を、指定された 整列ベースラインで グループのベースラインテーブルまたはそのミラーに揃えます。 どちらに揃えるかは、整列対象の 行方向によります。 特に指定がない場合（例： alignment-baselineプロパティなど）を除き、 整列ベースラインは 主要ベースラインになります。
-
整列済みの ベースライン共有グループを 整列コンテナー内で フォールバック整列に従って配置します。 フォールバック整列は グループ内各アイテムの フォールバック整列を 物理方向へ解決したものです。
-
最初／最後の ベースラインコンテンツ整列の場合は、 整列コンテナーの始端／終端コンテンツエッジと 整列対象のエッジの 間に必要最小限の余白を追加して、 整列コンテキスト内の すべての 整列コンテナーの 始端／終端マージンエッジが揃うようにしつつ、 ベースライン共有グループ 内でベースライン整列を維持する。
付録A: 静的配置用語
ある軸の インセットプロパティが両方とも auto で、 絶対配置ボックスに対して指定されているとき、 CSS2はその 静的位置 を サイズや位置の決定に使います。 CSS2.1§10.3.7 を参照してください。 ボックス整列プロパティは 他のレイアウトモードと同様に、これらの計算も修正します。 これらの修正は、静的位置矩形を参照します。 その矩形の各辺は、ボックスの 静的位置を その 包含ブロックの各側から表しています。
静的位置矩形とそれに対応する静的位置は、 「仮想ボックス」のレイアウトモデルによって定義されます：
- ブロックレイアウト
- 静的位置はブロックレベルボックスについて、 [CSS2]第10章で定義されています。 静的位置矩形は、 ボックスのstatic-position containing blockのインライン軸側で ゼロ厚みの矩形として広がります（CSS2§10.3.7参照）。 位置はblock-startの静的位置です（CSS2§10.6.4参照）。
- インラインレイアウト
- 静的位置はインラインレベルボックスについて、 [CSS2]第10章で定義されています。 静的位置矩形は、 「仮想ボックス」を含むはずだったline boxのline-over/line-under側で ゼロ厚みの矩形として広がります（CSS2§10.3.7参照）。 位置はinline-startの静的位置です。
- フレックスレイアウト
- 静的位置矩形は、フレックスコンテナーの子について、 flex containerのcontent edgeと対応します。 CSS Flexbox 1 § 4.1 絶対配置フレックス子参照。
- グリッドレイアウト
- デフォルトでは、静的位置矩形は、グリッドコンテナーの子について、 grid containerのcontent edgeと対応します。 ただし、そのgrid containerが実際のcontaining blockも確立する場合は、 grid area（grid-placementプロパティで指定）を 静的位置矩形とする。 grid container childの静的位置（[CSS-GRID-1]）参照。
10. 変更点
2025年3月11日作業草案からの変更点：
-
§ 4.4.1.2 絶対配置ボックスの自己整列が、position-areaにより使用値が normalから変更された場合に適用されることを明確化。
-
絶対配置ボックスが、スクロールコンテナーの包含ブロックの スクロール可能なオーバーフロー領域にはみ出していても、整列値を尊重できるようにした。 (Issue 12106)
-
normalに対して safe/unsafeを指定可能にした。 (Issue 12920)
-
safeの整列値で、スクロール可能な反転フレックスボックスの場合 コンテナーがflex-startにフォールバックするように変更し、 正しくsafeになるよう修正。 (Issue 11937)
-
無名ブロックボックスは常にjustify-self: normalとして振る舞うものと定義。 (Issue 11461)
-
justify-selfが ブロックレベルボックスの自動サイズ においてフレックス・グリッドアイテムと同様に働くことを定義。 (Issue 12102)
11. プライバシーに関する考慮事項
これは単純なレイアウト仕様なので、 新たなプライバシーに関する考慮事項はありません。
12. セキュリティに関する考慮事項
これは単純なレイアウト仕様なので、 新たなセキュリティに関する考慮事項はありません。
謝辞
特別な感謝を David Baron, Javier Fernandez, Markus Mielke, Alex Mogilevsky, そしてCSSWGの2008年3月F2F整列ディスカッション参加者に捧げます。 彼らは本仕様で説明される整列モデルに貢献しました。 また、Melanie Richards氏には各種整列キーワードの図解作成に感謝します。