CSSボックスアラインメントモジュール レベル3

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つの軸で説明できます：

• どの次元に適用されるか（メイン/インライン軸 vs. 交差/ブロック軸）、および
• 親内でのボックスの位置を制御するか、ボックス自体の内容の位置を制御するか

注: この仕様では「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-*プロパティの文法に明示的に含まれています。

「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キーワードとスクロール安全制限

整列対象が整列コンテナーより大きい場合、はみ出します。 一部の整列モードは、この状況でそのまま適用するとデータの欠落につながる可能性があります。 例えば、サイドバーの内容が中央揃えになっている場合、はみ出したときにボックスの一部がビューポートの開始端を超えてしまい、スクロールできず見えなくなります。

このような状況を制御するため、 オーバーフロー整列モードを明示的に指定できます。 "unsafe"整列は、はみ出し状況でも指定された整列モードをそのまま適用し、データ欠落が起きても変更しません。 "safe"整列は、はみ出し状況では整列モードを変更し、データ欠落を回避しようとします。 デフォルトは整列対象をスクロール可能エリア内に収める動作ですが、現時点ではこの安全機能は未実装です。

<overflow-position> = unsafe | safe

safe

整列対象のサイズが整列コンテナーをはみ出した場合、 整列対象は整列モードがstartであるかのように揃えられます。

unsafe

整列対象と整列コンテナーのサイズ関係にかかわらず、指定された整列値がそのまま適用されます。

(値未指定)

オーバーフロー整列が明示指定されていない場合、 デフォルトのオーバーフロー整列は"safe"と"unsafe"の混合です。 詳細は§ 4.4.1 オーバーフロー整列の自動安全性を参照。

4.4.1. オーバーフロー整列の自動安全性

プロパティにオーバーフロー整列モードが指定されていない場合、 デフォルトの動作はsafeとunsafeの中間であり、レイアウトモードによっても異なります。

4.4.1.1. スクロールコンテナーの内容分布

内容分布に関する、 スクロールコンテナーの デフォルトオーバーフロー整列動作はunsafeです。 normal以外の内容分布プロパティ値は、 スクロール可能オーバーフロー領域を変更し、はみ出した内容へアクセスできるようにします。 詳しくは§ 5.3 整列のオーバーフローとスクロールコンテナーを参照。

4.4.1.2. 絶対配置ボックスの自己整列

絶対配置の整列対象で、該当する自己整列プロパティがnormalでない場合、 デフォルトのオーバーフロー整列動作は以下の通りです：

(上記条件に当てはまらない絶対配置の整列対象については§ 4.4.1.3 その他の整列参照)

4.4.1.3. その他の整列

その他の要素の場合：

1. 整列対象が整列コンテナーからはみ出す場合、指定通りに揃える（unsafe）。

2. 整列対象が 最近傍のスクロールコンテナーのスクロール可能オーバーフロー領域からはみ出そうとする場合（「スクロール不可領域」に拡張される場合）、 その方向へのはみ出しは残りのはみ出しが反対側に偏るように制限されます。

「スマート」デフォルト挙動の実装はWeb互換性がないかもしれません （そうでないことを期待しており、可能性は高いと思っています）ので、UAはこの点に関するフィードバックをWGに報告してください。 「スマート」デフォルト挙動を実装していないUAは、safeとしてalign-contentをブロックコンテナーに適用し、 それ以外はunsafeとして動作すべきです。

5. 内容分布：ボックス内の内容の整列

内容分布は、 ボックス内の内容のコンテンツボックス内での整列を制御します。 内容分布プロパティalign-contentとjustify-content（およびplace-contentショートハンド）で指定します。

5.1. justify-contentおよびalign-contentプロパティ

ボックス内の内容全体（整列対象）を、ボックス自体（整列コンテナー）内で揃えます： justify-contentはインライン／行／メイン軸沿い、 align-contentはブロック／列／交差軸沿い。 normal以外の値は、§ 4 整列キーワードで定義されています。

すべてのレイアウトモードにおいて、 整列対象と整列コンテナーは、 *-contentプロパティが設定されているボックスの書字モードを引き継ぎます。

5.1.1. ブロックコンテナー（テーブルセル含む）

5.1.2. マルチカラムコンテナー

5.1.3. フレックスコンテナー

詳細は[CSS-FLEXBOX-1]参照。

5.1.4. グリッドコンテナー

詳細は[CSS-GRID-1]参照。

5.2. 内容分布ショートハンド：place-content プロパティ

このショートハンドプロパティは、 align-contentとjustify-contentの両方を一括で設定する。 最初の値がalign-contentに、 2番目の値がjustify-contentに割り当てられる。 省略時は最初の値がコピーされるが、<baseline-position>の場合はデフォルトでstartとなる。

5.3. 整列のオーバーフローとスクロールコンテナー

内容分布プロパティが スクロールコンテナーで、かつはみ出した整列対象がある場合、 負スクロール可能オーバーフロー領域のクリッピングを 整列対象が start揃えできるよう必要最小限に減らす。

注: 整列対象は スクロール可能オーバーフロー領域と必ずしも一致しない。 整列対象からはみ出した内容（例：out-of-flowボックス）は スクロール可能オーバーフロー領域は広げるが、 整列対象は広げない。 したがって、end揃えのスクロールコンテナーは 初期スクロール位置が必ずしも最下部にならない可能性があり、 配置された内容がさらに 負スクロール可能オーバーフロー領域奥にあれば クリップされることがある。

注: スクロールバーがあると スクロールコンテナーのコンテンツボックスのサイズが変わり、 整列コンテナーや整列対象のサイズも変化することがある。

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）端が揃うことが求められます。 それ以外の場合はフォールバック整列となります。

詳細は§ 9.3 ボックスのベースライン整列を参照。ベースライン内容整列はボックスの本来的なサイズを増加させることがあります。

6. 自己整列：親内でのボックスの整列

自己整列は、 ボックスをcontaining block内でどう揃えるかを制御します。 自己整列プロパティ align-selfや justify-self（およびplace-selfショートハンド）で指定します。

6.1. インライン軸（またはメイン軸）自己整列：justify-selfプロパティ

ボックス（整列対象）を containing block（整列コンテナー）内で インライン／行／メイン軸に沿って整列します： ボックスの外側の端が整列コンテナー内で、 整列値に従って揃えられます。 各値の意味：

auto

親がなければnormalと同じ動作。 または絶対配置ボックスの実際の位置を決定する際にも同様。 それ以外の場合（絶対配置ボックスの静的位置決定も含む）は、親ボックスの計算されたjustify-items値 （legacyキーワードを除く）で動作。

normal

レイアウトモードの「デフォルト」整列を表す。 挙動は下記の通りレイアウトモードによって異なる。

stretch

ボックスの算出width/height （該当軸に応じて）がautoで、かつその軸の両マージンがautoでない場合、 ボックスの外側サイズが 整列コンテナーをできるだけ満たす長さになるように使用サイズが設定されます。 ただしmin-height/min-width/max-height/max-widthの制約は守る。

特に指定がなければ、この値は一般的にはflex-startにフォールバックし、 同じ軸でfirst baselineやlast baselineベースライン内容整列が指定されていれば self-startやself-endとなる。

注: stretch キーワードは要素を縮小させてコンテナーに合わせる場合もある。

<baseline-position>

ベースライン自己整列を示す。 詳細は§ 4.2 ベースライン整列：baselineキーワードとfirst/last修飾子、 § 6.4 ベースライン自己整列、 § 9 ベースライン整列詳細参照。

<overflow-position>? <self-position>

上記§ 4 整列キーワードで定義。

stretch以外の値は、 width/heightが autoの場合、fit-contentとして扱われる。

注: autoマージンは、実質的にマージン領域のサイズを調整するため、 justify-selfより優先される。

6.1.1. ブロックレベルボックス

6.1.2. 絶対配置ボックス

このセクションは、justify-selfが 絶対配置ボックスのmargin boxが （絶対配置）containing blockに対してどのように配置されるかに及ぼす影響を説明します。

6.1.3. テーブルセル

このプロパティはテーブルセルには適用されません。 セルの位置・サイズはテーブルレイアウトによって完全に制約されるためです。

6.1.4. フレックスアイテム

このプロパティはフレックスアイテムには適用されません。 メイン軸に複数アイテムが存在するためです。 伸縮についてはflex、 メイン軸の整列はjustify-contentで制御します。[CSS-FLEXBOX-1]

6.1.5. グリッドアイテム

詳細は[CSS-GRID-1]参照。

6.2. ブロック軸（または交差軸）自己整列：align-selfプロパティ

ボックス（整列対象）を containing block（整列コンテナー）内で ブロック／列／交差軸に沿って整列します： ボックスの外側の端が整列コンテナー内で、 整列値に従って揃えられます。 各値の意味：

auto

親がなければnormalと同じ動作。 または絶対配置ボックスの実際の位置を決定する際にも同様。 それ以外の場合（絶対配置ボックスの静的位置決定も含む）は、親ボックスの計算されたalign-items値 （legacyキーワードを除く）で動作。

normal

レイアウトモードの「デフォルト」整列を表す。詳細は下記。

stretch

justify-selfで定義された内容（§ 6.1 インライン軸（またはメイン軸）自己整列：justify-selfプロパティ）と同じです。

<baseline-position>

ベースライン自己整列を示します。 詳細は§ 4.2 ベースライン整列：baselineキーワードとfirst/last修飾子、 § 6.4 ベースライン自己整列、 § 9 ベースライン整列詳細参照。

<overflow-position>? <self-position>

上記§ 4 整列キーワードで定義。

注: autoマージンは、実質的にマージン領域のサイズを調整するため、 align-selfより優先される。

6.2.1. ブロックレベルボックス

align-selfプロパティはブロックレベルボックス（フロート含む）には適用されません。 ブロック軸に複数アイテムが存在するためです。

6.2.2. 絶対配置ボックス

このセクションは、align-selfが 絶対配置ボックスのmargin boxが （絶対配置）containing blockに対してどのように配置されるかに及ぼす影響を説明します。

6.2.3. テーブルセル

このプロパティはテーブルセルには適用されません。 セルの位置・サイズはテーブルレイアウトによって完全に制約されるためです。

6.2.4. フレックスアイテム

詳細は[CSS-FLEXBOX-1]参照。

6.2.5. グリッドアイテム

詳細は[CSS-GRID-1]参照。

6.3. 自己整列ショートハンド：place-selfプロパティ

このショートハンドプロパティは 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プロパティの値参照に置き換えます （該当軸で定義されている方）。 left相当の整列はltrの定義、right相当の整列はrtlの定義と同様に扱います。 normalはstartとして、 分布整列値はそのフォールバック整列として扱います。

center整列の場合、 ボックスの利用可能なスペースは static-position rectangleの中央から 該当軸のcontaining blockの最も近い端までの距離の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-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-selfを指定します。

値は特別な処理はなく、align-selfに参照されます。

7.3. デフォルト整列ショートハンド：place-itemsプロパティ

このショートハンドプロパティは align-itemsとjustify-itemsの両方を一度でセットします。 最初の値はalign-itemsに、 2番目の値はjustify-itemsに割り当てられます。 省略された場合は最初の値がコピーされます。

8. ボックス間の隙間

marginやpaddingは、個々のボックスの周囲の視覚的なスペース指定に使えますが、 レイアウトコンテキスト内で隣接するボックス同士の間隔を一括指定したい場合もあります。 特に兄弟ボックス同士の間隔と、最初／最後のボックスとコンテナー端の間隔を区別したい場合に便利です。

gapプロパティ、 およびrow-gap・column-gapサブプロパティは、 マルチカラム、フレックス、 グリッドレイアウトに対してこの機能を提供します。

8.1. 行・列のガター：row-gapとcolumn-gapプロパティ

これらのプロパティはコンテナー内のアイテム間の固定長ガターを指定し、間にスペースを追加します。 これは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）は、 アイテム間の最小スペースを示します （隣接するフレックスアイテム間に追加の固定サイズmarginが挿入されたかのように扱う）。

交差軸に適用する場合（例：rowフレックスコンテナーのrow-gap）は、 隣接するフレックスライン間の最小スペースを示します。

グリッドコンテナー

row-gapとcolumn-gapプロパティは、 グリッドコンテナーに指定すると、それぞれガターを グリッド行や グリッド列間に定義します。 詳細はCSS Grid Layout 1 § 10.1 Gutters: the row-gap, column-gap, and gap properties参照。

いずれの場合も、ガターが フラグメントブレイクと重なる場合は消失します。[CSS-BREAK-3]

注: テーブルボックスはセル間の分離にgapプロパティを使いません。 代わりにborder-spacingプロパティを使い、 機能に若干の違いがあります： 継承し、 また最も外側のセルとテーブルの枠線との追加スペースも指定します （space-evenlyに近いが、space-betweenとは異なります）。

8.2. ギャップ・ショートハンド：gapプロパティ

このプロパティはショートハンドであり、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ベースラインセットは、 レイアウトモデルごとに以下のように決定されます：

line box

line boxのfirst/lastベースラインセットは 支配的ベースラインと、そのroot inline boxのフォント設定から 生成されます。

ブロックコンテナー

ブロックコンテナーのfirst/lastベースラインセットは in-flowな最初／最後のline box、またはベースラインセットを持つ最初／最後のin-flowブロックレベル子要素から取得されます。 存在しなければベースラインセットはありません。

ただし、レガシー理由で baseline-sourceがauto（初期値）の場合は、 ブロックレベルまたはインラインレベルのブロックコンテナーが スクロールコンテナーの場合は必ずlast baseline setを持ち、 そのベースラインはすべてblock-endの margin edgeと対応します。

マルチカラムコンテナー

マルチカラムコンテナーのfirstベースラインセットは、 ベースラインセットのうち、 カラムまたはカラムスパンナーのうち、最も高い（block-start側）ベースラインが マルチカラムコンテナーの整列ベースラインと対応するものです。 存在しなければベースラインセットはありません。

lastベースラインセットは 同様に、lastベースラインセットと最も低い（block-end側）ベースラインを使います。

テーブル

テーブルボックスのfirst/lastベースラインセットは 最初／最後の行のfirst/lastベースラインセットです。

インラインブロックのfirst/lastベースラインセットを探す際は、 テーブルボックスが寄与するベースラインはスキップしなければなりません。 （この挙動は[CSS2]のレガシー仕様です。）

テーブル行

行内のセルがfirst baselineやlast baseline整列に インライン軸で参加している場合、 行のfirst/lastベースラインセットは それらの共通整列ベースラインと行の利用可能な最初のフォントから 生成されます（整列後）。 それ以外の場合、行のfirst/lastベースラインセットは 行内セルの最も高い／低いcontent edgeから合成されます。[CSS2]

セルのrowスパンは、first/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プロパティ参照）を持つin-flowの子孫は 初期スクロール位置にあるものとして扱わなければなりません。 さらに、 スクロールコンテナーのfirst/lastベースライン位置が border edge外にある場合は、そのベースライン位置はborder edgeにクランプされます。

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. ボックスのベースライン整列

同じベースライン共有グループに属する整列対象とそのベースラインが与えられた場合、 整列対象のベースライン整列は次の通り行います：

1. ベースライン共有グループのベースラインテーブルを、 グループの利用可能な最初のフォントと整列コンテキストから生成し、 さらにその中央ベースラインでミラーしたベースラインテーブルも重ねる。 これらが整列対象が揃えるベースライン「グリッド」となる。

2. 各整列対象を、その指定された整列ベースラインで グループのベースラインテーブルまたはそのミラーに揃える（整列対象のline orientationに応じて）。 特に指定がなければ（例：alignment-baselineプロパティ）、 整列ベースラインは支配的ベースライン（dominant baseline）です。

3. 揃えたベースライン共有グループを整列コンテナー内で そのフォールバック整列に従って配置する。 フォールバック整列は アイテムの物理方向に解決したものとする。

4. first/lastベースライン内容整列の場合は、 整列コンテナーの開始／終了content edgeと 整列対象の端の間に 必要最小限の余白を追加して、 整列コンテナーのstart/end margin edgeが 整列コンテキスト内で揃うようにし、 かつグループ内のベースライン整列は維持する。

付録A: 静的配置用語

ある軸の両方のinsetプロパティがautoとなっている絶対配置ボックスでは、 CSS2は静的位置でサイズと位置を決定します。 CSS2.1§10.3.7参照。 ボックス整列プロパティは 他のレイアウトモードと同様にこれらの計算を変更します。 これらの変更は静的位置矩形を参照し、 その端がボックスの静的位置を containing blockの各側から示します。

静的位置矩形とそれに対応する静的位置は、 「仮想ボックス」のレイアウトモデルによって定義されます：

ブロックレイアウト

静的位置はブロックレベルボックスについて、 [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. 変更点

2023年2月17日 ワーキングドラフト以降の変更点：

• ブロックコンテナーのデフォルト整列をsafeに変更。 詳細は§ 4.4.1.3 その他の整列参照。 (Issue 8992)
• 絶対配置ボックスのデフォルトを「スマート」なsafe整列（inset修正containing blockのunsafeなオーバーフローを許可しつつ、元containing block内の安全性を維持）に変更。 詳細は§ 4.4.1.2 絶対配置ボックスの自己整列参照。 (Issue 10316, Issue 9960)
• space-*キーワードの全てをsafeオーバーフローにフォールバックさせるように変更。 (Issue 10154)
• はみ出す内容分布とスクロールコンテナーの相互作用を厳密化。 レイアウトに影響せず、スクロール可能オーバーフロー領域の範囲のみに影響することを明記。 (Issue 4957)
• 特別なmargin edgeベースライン規則をスクロールコンテナーのブロックコンテナーでのみ、baseline-sourceが初期値の場合に適用するよう変更。 (Issue 8214)
• 直交フローボックスのベースライン合成時、仮定する並行書字モードをdirectionに依存させるよう変更。 (Issue 7775)

  それ以外の場合は、ボックス自身のwriting-modeと直交する horizontal-tbまたはvertical-lr writing-modeを仮定する。

  それ以外の場合：

  • ボックス自身の書字モードが縦書きの場合は horizontal-tbを仮定。
  • ボックス自身の書字モードが横書きの場合は vertical-lr（directionがltrの場合）、 vertical-rl（directionがrtlの場合）を仮定。

• rowスパンするセルはfirst/lastベースライン整列ではスパンした最初／最後の行のみ参加することを明確化。 (Issue 7655)
• grid-gapプロパティをレガシー名称エイリアスとしてgapプロパティと同義に定義。 (Issue 8014)
• normal整列の絶対配置ボックスへの定義を[css-position-3]に委譲。 (Issue 11215, Issue 11285)
• row-gapのマルチカラムコンテナーへの適用条件を [CSS-MULTICOL-2]に適用されることを明確化。 (Issue 11539)
• ガターがフラグメントブレイクで消失することを定義。 (Issue 11520)

2021年12月24日 ワーキングドラフト以降の変更点：

• マルチカラムコンテナーのベースライン定義。 (Issue 7856, Issue 7639)
• 書字モードをstatic-position containing blockに依存して静的位置決定するよう変更。 (Issue 7599, Issue 7612; 変更)
• 非normal整列のスクロール可能オーバーフローにpaddingを含める特別動作定義を削除。 現在は[CSS-OVERFLOW-3]で無条件に定義されているため。 (Issue 129)
• 細かな明確化：

  • フォールバック整列のベースライン共有グループ定義を 各アイテムのフォールバック整列の共有とした。

  • <length-percentage>値定義をCSS角括弧範囲記法で注釈した。

2020年4月21日 ワーキングドラフト以降の変更点：

• [ first | last ]とbaselineの並び順変更を許可。 (Issue 5235)
• フォールバック整列にspace-aroundやspace-evenlyはsafeを含むように変更。 (Issue 5088)
• 各レイアウト仕様に合わせて、normal整列・パーセンテージギャップの修正。
• レガシー処理の修正（last baseline setのスクロールコンテナーへの影響）。 (Issue 3611)
• ベースラインセットのないボックスは必要に応じて整列ベースラインを合成することを明確化。 (Issue 3611)
• 非置換ボックスのみ内容分布の影響を受けることを明確化。 (Issue 4545)
• 協調自己整列優先度がある場合のベースライン内容整列の有効化条件、とくにauto marginとの関係について明確化。 (Issue 5923)
• ベースライン自己整列と内容整列の相互作用をより明確に定義。 (Issue 6389)
• ベースライン共有グループのフォールバック整列の決定方法を明確化。 (Issue 7645)

2018年12月6日 ワーキングドラフト以降の変更点：

• 絶対配置要素のcenter自己整列を改善。Issue 4659
• 混在書字モードでのベースライン整列のフォールバック不一致を修正。Issue 3454
• 細かな編集修正と明確化。

2018年8月30日 ワーキングドラフト以降の変更点は、いくつかの軽微な明確化のみ。

2018年4月23日 ワーキングドラフト以降の変更点：

• 絶対配置ボックスのautoオフセットに対する整列プロパティの相互作用を明確化。 詳細は§ 6.1.2 絶対配置ボックス、§ 6.2.2 絶対配置ボックス、§ 6.5 静的位置インセットを持つ絶対配置ボックスのサイズへの効果、付録A: 静的配置用語参照。
• 内容分布プロパティのスクロールコンテナーでの動作定義をより詳細に記載。 詳細は§ 5.3 整列のオーバーフローとスクロールコンテナー参照。
• インラインブロックスクロールコンテナーのベースラインに関するCSS2の特別規則を記載。
• パーセンテージギャップが本来的サイズ算出時にはゼロ、レイアウト時に解決することを定義。（Issue 509）
• その他細かな明確化。

2017年9月6日 ワーキングドラフト以降の変更点：

• 図解を追加！難しい図解問題に取り組んだMelanie Richards氏に感謝。
• gapショートハンドのプロパティ定義表記誤りを修正。
• ギャップのパーセンテージを、包含ブロックのサイズがギャップに依存する場合はゼロとして解決するよう明記。 (Issue 509, Issue 2297)
• left、rightのgrammarでの扱いの誤りを修正。
• space-alignのフォールバック整列の不一致を修正。 (Issue 2316)
• ボックス端が揃わない場合のベースライン整列処理を厳密化。 (Issue 1556, Issue 1611)
• その他明確化。

2017年7月20日 ワーキングドラフト以降の変更点：

• row-gap、column-gap、gapプロパティを追加し、 グリッドレイアウトやフレックスレイアウトに適用、 grid専用のgrid-row-gap/grid-column-gap/grid-gap プロパティを置き換え。

2017年5月15日 ワーキングドラフト以降の変更点：

• leftやrightキーワードをalign-self・align-contentから削除。 要望があれば今後のレベルで再導入の可能性あり。 (Issue 1403)
• endフォールバック整列をstretchとlast baselineの内容整列組み合わせ時に割り当て。
• テーブル列のセル間でのベースライン整列を実装困難のため無効化。
• David Baron氏報告の多数の細かな修正・明確化 一覧。

2017年4月7日 ワーキングドラフト以降の変更点：

• 部分実装の扱い明確化のためセクション追加。 (Issue 1167)
• <baseline-position>値をjustify-contentから削除。実質的に機能しないため。 (Issue 1184)
• フォールバック整列の指定能力をLevel 4に先送り。 (Issue 1002)
• <overflow-position>と<content-position>の順序修正。 (Issue 1001)
• ブロック軸でベースライン整列するボックス処理の規則修正。 (Issue 1038)
• justify-items: autoをjustify-items: legacyに名称変更。 (Issue 1318)
• スクロール可能なボックスのベースラインをmargin edgeではなくborder edgeにクランプするよう修正。 (Issue 766)

11. プライバシーに関する考慮事項

これは単純なレイアウト仕様なので、 新たなプライバシーに関する考慮事項はありません。

12. セキュリティに関する考慮事項

これは単純なレイアウト仕様なので、 新たなセキュリティに関する考慮事項はありません。

謝辞

特別な感謝を David Baron, Javier Fernandez, Markus Mielke, Alex Mogilevsky, そしてCSSWGの2008年3月F2F整列ディスカッション参加者に捧げます。 彼らは本仕様で説明される整列モデルに貢献しました。 また、Melanie Richards氏には各種整列キーワードの図解作成に感謝します。