1. はじめに
CSSレベル1と2では、text-alignによるテキストの整列や、autoマージンのバランスによるブロックの整列が可能でした。 しかし、テーブルセル以外では垂直方向の整列はできませんでした。 CSSがさらなる機能を追加するにつれ、 ボックスを様々な次元で整列させる能力がより重要になってきます。 このモジュールは、CSS全体で共有される一貫した共通のボックス整列モデルを作成しようとしています。
注: テキストやインラインレベルの内容の整列は [CSS-TEXT-3]および[CSS-INLINE-3]で定義されています。
注: 本仕様は、ここで定義されるプロパティが初期値に設定されている場合、 CSS2.1で定義された動作を変更することを意図していません。 実装者やその他の方が何らかの不一致に気付いた場合は、 CSSWGにエラーとして報告してください。
このセクション（上記）は規範的ではありません。
1.1. モジュール間の相互作用
このモジュールは、[CSS2] の第9章 および第10章で説明されているブロックレイアウトモデルに 新しい整列機能をいくつか追加し、 制約過剰なブロックレベルボックスのマージンの解決方法を再定義し、 さらに、これらの新しい整列プロパティと、 [CSS2] の第17章で定義されている vertical-align を使用した 表セルの内容の整列との相互作用を定義する。
これらのプロパティと グリッドレイアウト [CSS-GRID-1] およびフレキシブルボックスレイアウト [CSS-FLEXBOX-1] との相互作用は、それぞれのモジュールで定義される。 ここでのプロパティ定義は、[CSS-FLEXBOX-1] の定義に優先する （後者では、許容される値が以前のより小さな部分集合に限定されている）。
このモジュールのプロパティはいずれも、::first-line
または ::first-letter 擬似要素には適用されない。
1.2. 値の定義
この仕様は、[CSS2] のCSS プロパティ 定義規則に従い、 [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
-
整列
対象は、整列コンテナー内に均等に分配される。
最初の整列対象は、
整列コンテナーの開始端に接して配置され、
最後の整列対象は、
整列コンテナーの終了端に接して配置され、
残りの整列対象は、
隣接する任意の2つの整列
対象の間隔が等しくなるように分配される。
この値の既定のフォールバック整列はsafe flex-startである。 （フレックスレイアウト以外のレイアウトモードでは、flex-startはstartと同じである。）
- space-around
-
整列
対象は、整列コンテナー内に均等に分配され、
両端には半分の大きさの空間が配置される。
整列対象は、
隣接する任意の2つの整列対象の間隔が等しくなり、
最初の対象の前と最後の整列
対象の後の間隔が、他の間隔の半分の大きさになるように分配される。
この値の既定のフォールバック整列はsafe centerである。
- space-evenly
-
整列
対象は、整列コンテナー内に均等に分配され、
両端には他の間隔と同じ大きさの空間が配置される。
整列対象は、
隣接する任意の2つの整列対象の間、
最初の整列対象の前、
および最後の整列対象の後の間隔が
すべて等しくなるように分配される。
この値の既定のフォールバック整列は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 であるかのように整列される。 ただし、絶対位置指定されたボックスについては、§ 4.4.1.2 絶対位置指定されたボックスの自己整列を参照。
- unsafe
- 整列対象と整列コンテナーの相対的なサイズにかかわらず、 指定された整列値がそのまま適用される。
- デフォルト（値が指定されていない場合）
- オーバーフロー 整列が明示的に指定されていない場合、 デフォルトのオーバーフロー整列は、 「safe」と「unsafe」を組み合わせたものとなる。 詳細については、§ 4.4.1 オーバーフロー整列の自動的な安全性を参照。
4.4.1. オーバーフロー整列の自動安全性
プロパティにオーバーフロー整列モードが指定されていない場合、 デフォルトの動作はsafeとunsafeの中間であり、レイアウトモードによっても異なります。
4.4.1.1. スクロールコンテナーの内容分布
スクロール コンテナーのスクロール可能な軸において、 内容の分配に対するデフォルトのオーバーフロー 整列の動作は、unsafe である。 内容分配プロパティのnormal 以外の値は、代わりに はみ出した内容にアクセスできるようにするため、 スクロール可能なオーバーフロー領域を変更する。 詳細については、§ 5.3 整列によるオーバーフローとスクロールコンテナーを参照。
4.4.1.2. 絶対配置ボックスの自己整列
関連する自己整列プロパティの使用値が normal ではない、 絶対位置指定された整列対象については、 デフォルトおよび safe のオーバーフロー整列の動作は 次のとおりである。
-
整列対象がインセットによって変更された包含ブロック内に収まる場合、 インセットによって変更された 包含ブロックからはみ出さない範囲で、 可能な限り指定どおりに整列する。
-
それ以外の場合、 整列対象がoverflow limit rect 内に収まるなら、 整列対象が インセットによって変更された包含ブロックを 完全に覆い、かつそれ以外の点では overflow limit rect からはみ出さない範囲で、 可能な限り指定どおりに整列する。
-
それ以外の場合、 整列対象をoverflow limit rect 内で始端に整列する。
この目的において、overflow limit rect は、 整列 対象のインセットによって変更された包含ブロック と、その元の包含ブロックを囲む矩形であり、 次のように拡張される。
- 固定位置指定されたボックスで、デフォルトのオーバーフロー整列を使用する場合（のみ）
-
内容とともにスクロールするデフォルトのアンカーボックスを持つ固定位置指定されたボックスは、 スクロールポートの外側にある場合でも、スクロールして表示領域内に移動できるため、 このような場合、overflow limit rect は スクロールコンテナーのスクロール可能なオーバーフロー領域全体まで拡張される。
- 絶対位置指定されたボックスで、固定位置指定されていない場合
-
スクロール可能なオーバーフロー領域は、スクロールコンテナーにおいて、 はみ出した絶対位置指定されたボックスの可視性を確保するために拡張できるので、 元の包含ブロックが スクロールコンテナーによって生成されており、 （その固定包含ブロックではない）場合、 overflow limit rect は、 スクロール可能な軸に沿って、 到達不能なスクロール可能オーバーフロー 領域に入り込まないすべての方向に無限に拡張される。
（上記の絶対位置指定された整列対象で、上記の 条件を満たさないものについては、 § 4.4.1.3 その他すべての整列を参照。）
注: これらの規則は、ボックスの位置を制約して オーバーフローを最小限に抑え、 可能な限り指定された整列を尊重しながら、 ボックスのサイズが変化しても連続的な動作を確保する。
「ページとともに スクロールする」をより正確に定義し、 スクロール可能なオーバーフロー領域内に包含されるか、そこにアンカーされるすべてのアンカーを対象に含める。
4.4.1.3. その他の整列
その他すべての要素については、次のとおりとする。
-
整列 対象が、 最も近い祖先のスクロールコンテナーのスクロール可能なオーバーフロー領域からはみ出す場合、 （つまり、「スクロール不能」な領域に入り込む場合）、 残りのオーバーフローを反対側に偏らせることで、 その方向へのオーバーフローを制限する。
この「スマート」なデフォルト動作の実装は、 Web 互換性を確保できない可能性がある （そうならないことを期待しており、その可能性は高いと考えているが）。 そのため、UA はこの点に関するフィードバックを WG に伝えるべきである。 「スマート」なデフォルト動作を実装していない UA は、 ブロック コンテナーのalign-content については safe として動作し、 それ以外の場合は 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. ブロックコンテナー（テーブルセル含む）
| 整列 コンテナー | ブロックコンテナーの内容ボックス。 |
|---|---|
| 整列 対象（単数または複数） | ブロックの内容全体を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] |
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. グリッドコンテナー
| 整列 コンテナー | グリッドコンテナーの内容ボックス。 |
|---|---|
| 整列 対象（単数または複数） | 対応する軸のグリッドトラックであり、 トラック間に挿入される間隔はすべて、 対応する溝に追加され、 折り畳まれた溝は、 空間を挿入する単一の機会として扱われる。 |
| 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. 整列のオーバーフローとスクロールコンテナー
内容分配プロパティが、はみ出している整列対象を持つスクロールコンテナーの スクロール可能な軸に設定されている場合、 これらのプロパティは、到達不能なスクロール可能オーバーフロー領域のクリッピングを、 整列対象が start に整列された位置までスクロールできるようにするために必要な分だけ緩和する。
注: 整列対象は、必ずしも スクロール可能なオーバーフロー領域と同一ではない。 整列対象からはみ出す内容（フロー外のボックスなど）は、スクロール可能なオーバーフロー領域を拡大するが、整列対象は拡大しない。 したがって、end に整列されたスクロール コンテナーは、 初期状態で最下部までスクロールされていない場合があり、 位置指定された内容が、 整列 対象を形成するフロー内の内容よりも 到達不能なスクロール可能オーバーフロー領域の奥まで入り込んでいる場合、 その内容は依然としてクリッピングされる可能性がある。
この画像も置き換えてください。
注: スクロールバーが表示されることで スクロールコンテナーの 内容領域のサイズ （および 整列コンテナー や 整列対象のサイズ）も 変化することがあります。
5.4. ベースライン内容整列
行のようなレイアウトコンテキスト（共通整列コンテキスト）に参加するボックスの内容は、互いにベースライン整列できます。ベースライン内容整列は、ボックスのpaddingを効果的に増やし、 内容の整列ベースラインを 同じベースライン共有グループ内の他のベースライン整列ボックスと揃える役割を果たします。
注: 適用可能な書式設定コンテキストにおいて、ベースライン内容整列を完全にはサポートしていない実装は、 baseline 値を 有効な値として解析してはならない。 WPT にテストがないことは、 不完全な実装を提供する言い訳にはならない。 <—現在、ブラウザーはこれを解析しているが、有用な処理は何も行っていない。:( https://github.com/w3c/csswg-drafts/issues/13421 -->
ベースライン 内容整列は、align-content の軸が ボックスのブロック軸と平行な場合にのみ 適用できる（つまり、「column」のフレックス コンテナーには適用されない）。 それ以外の場合は、フォールバック 整列が使用される。
ベースライン内容整列に参加する ボックスの集合は、レイアウトモデルによって異なる。
- 表セル：
-
（非置換の）表セルは、
そのインライン軸が表自体のインライン軸と平行であり、
算出された align-content が
first
baseline（last baseline）である場合、
最も始端側（終端側）の行で
最初（最後）のベースライン内容整列に参加する。
注: 同じ列を共有するセルの ベースライン 内容整列はサポートされていない。 ただし、十分な需要と実装者の関心があれば、 将来のレベルで追加される可能性がある。
- フレックスアイテム：
- 非置換のフレックスアイテムは、 算出された align-content が first baseline/last baseline であり、 そのインライン軸が主軸と平行な場合、 所属するフレックス行の 最初（最後）のベースライン内容整列に参加する。
- グリッドアイテム：
- 非置換のグリッドアイテムは、 最も始端側（終端側）の行または列 （そのインライン 軸と平行な方）において、 算出された align-content が first baseline/last baseline である場合、 最初（最後）のベースライン内容整列に参加する。
さらに、 ベースライン内容整列に参加するには、 協調した自己整列の優先設定も必要である。 これは、ボックスの対応する辺が 同じベースライン共有グループ内の 他のボックスと揃うことを保証するためである。 つまり、ボックスの始端（終端）のマージン辺は、 ベースライン整列の優先設定が「first」（「last」）の場合、 その包含ブロックの対応する辺に 整列することが意図され、実際に整列しなければならない。 それ以外の場合は、フォールバック整列が適用される。
自己整列の優先設定が協調するのはどのような場合か？
ボックスの始端のマージン辺が、 その包含ブロックの対応する辺に整列し、 関連する軸において次の条件を満たす場合、 「first」のベースライン整列の優先設定に対して 協調した自己整列の優先設定を持つ。
-
auto のマージンがなく、 関連する自己整列プロパティが、 stretch または self-start であるか、 それらと同じように整列する場合。または
-
auto の終端側のマージンのみが存在し、 それが正の空き領域をすべて吸収し、 あらゆる自己整列プロパティの効果を無効にし、 かつ そのマージンボックスが、 実質的に終端整列となるような状況で 包含ブロックからはみ出さない場合 （例えば、包含ブロックが反対方向の 書字方向モードを持つ場合）。
ボックスの終端のマージン辺が、 その包含ブロックの対応する辺に整列し、 関連する軸において次の条件を満たす場合、 「last」のベースライン整列の優先設定に対して 協調した自己整列の優先設定を持つ。
詳細については、§ 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でない場合、
fit-contentと等価になる。
（例えば、stretchなどとは異なる。非置換のブロックレベル
ボックスでは通常はstretchとなる）。
さらに、
CSS2.1のブロックレベル整形[CSS2]に関しては、
第10.3.3節の「過剰制約」の計算規則は、
ここで指定された整列が優先されるため無視され、
その結果、マージンプロパティの使用値は、
過剰制約を解消するために調整されない。
このプロパティはフロートには適用されない。 匿名ブロックボックスは常にnormalとして振る舞う。 |
6.1.2. 絶対配置ボックス
この節では、justify-selfが、 絶対位置指定されたボックスのマージンボックスを その（絶対位置指定の）包含ブロックに対してどのように配置するかを説明する。
| justify-self軸 | ブロックの包含ブロックのインライン軸。 |
|---|---|
| 整列 コンテナー | ボックスの包含ブロックであり、 インセットプロパティ（top/right/bottom/left）によって変更されたもの。 その際、書字モードには包含ブロックのものを用いる。 対応する軸の両方のインセットプロパティがautoである場合、 ボックスの静的位置の矩形を使用する （すなわち、両方のインセットをボックスの静的位置に設定する）。 その際、書字モードには静的位置の包含ブロックのものを用いる。 |
| 整列 対象 | ボックスのマージンボックスであり、 その際、書字モードにはボックスのものを用いる。 |
| normalの振る舞い | stretchまたはstartとして振る舞い、 どちらになるかはボックスの種類によって異なる。 詳細はCSS 位置指定レイアウト 3 § 4 絶対位置指定レイアウトモデルを参照。 |
| その他の詳細 |
CSS2.1の整形に関しては[CSS2]、
「過剰制約」の計算に関する第10.3.7節の規則は、
ここで指定された整列が優先されるため無視され、
その結果、インセットプロパティの使用値は、
過剰制約を解消するために調整されない。
stretchまたはnormal以外の値は、 非置換の 絶対位置指定ボックスに、 fit-contentによるサイズ決定を使用してautoサイズを計算させる。 これは影響を受ける軸に適用される。 なお、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（一般的な置換要素の場合）に従って決定される。 グリッドアイテムのサイズ決定（[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が、 絶対位置指定ボックスのマージンボックスを その（絶対位置指定の）包含ブロックに対してどのように配置するかを説明する。
| align-self軸 | 原則として、ボックスの包含ブロックのブロック 軸。 ただし、静的位置の包含ブロックのブロック軸を使用するのは、 静的位置を決定する場合である。 |
|---|---|
| 整列 コンテナー | ボックスの包含ブロックを、 インセットプロパティによって変更したもの （top/right/bottom/left）。 その際、書字モードには包含ブロックのものを用いる。 対応する軸の両方のインセットプロパティがautoである場合、 ボックスの静的位置の矩形を使用する （すなわち、両方のインセットをボックスの静的位置に設定する）。 また、書字モードには静的位置の包含ブロックのものを用いる。 |
| 整列 対象 | ボックスのマージンボックスであり、 その際、書字モードにはボックスのものを用いる。 |
| normalの振る舞い | stretchまたはstartとして振る舞い、 どちらになるかはボックスの種類によって異なる。 CSS 位置指定レイアウト 3 § 4 絶対位置指定レイアウトモデルを参照。 |
| その他の詳細 |
CSS2.1の整形に関しては[CSS2]、
第10.6.4節の「過剰制約」の計算規則は、
ここで指定された整列が優先されるため無視され、
その結果、インセットプロパティの使用値は、
過剰制約を解消するために調整されない。
stretchまたはnormal以外の値は、 非置換の 絶対位置指定ボックスに、 fit-contentによるサイズ決定を使用してautoサイズを計算させる。 これは影響を受ける軸に適用される。 なお、stretchは、置換 絶対位置指定ボックスにも、 その包含ブロックを満たすように作用し、 非置換ボックスの場合と同じように振る舞う。 注: インセットプロパティの一方だけがautoである場合、 CSS2の第 10.6.4節の計算によって、 そのサイズと位置が完全に決定され、 align-selfは効果を持たない。 （両方がautoである場合、 ボックスは静的位置に配置され、 前述のとおり、 静的位置の矩形内で整列できる。） |
6.2.3. テーブルセル
このプロパティはテーブルセルには適用されません。 セルの位置・サイズはテーブルレイアウトによって完全に制約されるためです。
6.2.4. フレックスアイテム
| align-self軸 | フレックスコンテナーの交差 軸。 |
|---|---|
| 整列 コンテナー | フレックスラインのうち、フレックスアイテム が属するものであり、 その際、書字モードにはフレックスコンテナーのものを用いる。 |
| 整列 対象 | フレックスアイテムのマージンボックスであり、 その際、書字モードにはフレックス アイテムのものを用いる。 |
| 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プロパティに基づいて決まる。 これは静的位置の包含ブロックのプロパティである。 （CSS2§10.3.7 およびCSS2§10.3.8を参照。） 基本的に、これらの規則では、autoである インセットの一方を （既定では開始端側のインセット）、 静的位置の矩形の対応する端に設定し、 他方を包含 ブロックの対応する端に設定する （すなわち、インセットをゼロに設定する）。 自己整列プロパティが 配置において包含ブロックの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によるサイズ決定（利用可能な空間をすべて使用する）に置き換える。 これは、ここでの利用可能な空間の調整とは独立した効果である。
注: これは利用可能な空間の 計算方法にのみ影響し、 絶対位置指定ボックスのサイズ決定に適用される。 その整列は前の節で指定されたとおりである。
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 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセンテージ: | 該当なし |
| 計算値: | 指定されたキーワード。ただし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 |
| 適用対象: | すべての要素 |
| 継承: | しない |
| パーセンテージ: | 該当なし |
| 計算値: | 指定されたキーワード |
| 正規順序: | 文法に従う |
| アニメーションの種類: | 離散 |
このプロパティは、既定の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. ボックス間の隙間
この節はCSS の隙間 レベル 1 § 2 ボックス間の隙間に移動された。
9. ベースライン整列詳細
ベースライン共有グループ内のボックスは、 互いに整列ベースラインを使って整列されます。 例えば、横書きモードでは、同じ行のテーブルセルにalign-content: baselineを指定すると、 それらの最初の整形行のベースラインが揃います。 この章では、多様なベースラインや国際化CSSにおける書字モードを考慮したベースライン整列の厳密な定義を示します。
ベースラインセットは、 共通のベースラインテーブルに紐づく（アルファベット・中央など）複数のベースライン集合です。 組版の伝統的な慣習では通常ひとつが使われますが、書記体系によって異なり、 複数の書記体系が混在する場合、1行内で複数ベースラインが使われることもあります。 ベースラインや書字モードの詳細はCSS Writing Modes 3 § 4.1 ベースラインの概要参照。
9.1. ボックスのベースライン決定
各ボックスは、 特定の軸について、 場合によっては 最初のベースライン集合 （および最後のベースライン集合）を持ち、 これは名目上、ボックス内の最初／最後のテキスト行の ベースライン集合に 対応する。 整列 ベースラインは、 ボックスをその整列コンテキスト内で整列するために使用されるベースラインであり、 そのベースライン集合に含まれるベースラインの1つである。 通常は、に関連付けられた支配的ベースラインである。 （[CSS-INLINE-3]の dominant-baselineおよびalignment-baselineプロパティを参照。）
ボックスの最初と最後のベースライン集合は、 レイアウトモデルに応じて、 次のように異なる方法で決定される。
- ラインボックス
- ラインボックスの最初／最後のベースライン集合は、 その支配的ベースラインと ルートインライン ボックスのフォント設定から 生成される。
- ブロックコンテナー
-
ブロックコンテナーの最初／最後のベースライン集合は、
ブロックコンテナー内の最初／最後のフロー内ラインボックス、
または最初／最後のフロー内ブロックレベルの子のうち、
最初／最後のベースライン集合を提供するものから取得される。
どちらが先／後に現れるかによって決まる。
そのようなラインボックスまたは子が存在しない場合、
ブロックコンテナーにはベースライン集合がない。
ただし、互換性上の理由から、 baseline-sourceがauto（初期 値）である場合、 ブロックレベルまたはインラインレベルのブロック コンテナーで、 ブロック軸スクロールコンテナーであるものは、 常に最後の ベースライン集合を持ち、 そのすべてのベースラインはblock-end側の マージン辺に対応する。
- 段組みコンテナー
-
段組みコンテナーの最初のベースライン集合は、
段または段またぎ要素の
最初のベースライン集合であり、
最も高い（block-start側に最も近い）ベースラインが
段組みコンテナーの整列
ベースラインに対応するものとなる。
そのようなラインボックスまたは子が存在しない場合、
段組みコンテナーには最初のベースライン集合がない。
最後のベースライン集合も 同様に決定されるが、 最後のベースライン集合と 最も低い（block-end側に最も近い）ベースラインを使用する。
- 表
-
表ボックスの最初／最後のベースライン集合は、
その最初／最後の行の最初／最後のベースライン集合である
（表の行
グループボックスの並べ替えがあれば、その後のもの）。
インラインブロックの最初／最後のベースライン集合を求める際には、 表ボックスが提供するベースラインをすべてスキップしなければならない。 （この特殊な振る舞いは[CSS2]から引き継がれたものである。）
- 表の行
-
表の行ボックスの
最初のベースライン集合は、
次のうち最初に利用可能なものから取得される。
-
行内のいずれかのセルが、 表のインライン軸に沿った最初のベースライン整列に参加する場合、 共有された整列ベースラインと 行の最初に利用可能なフォントから、 ベースライン集合を生成する。 これは整列が実行された後に行う。
-
それ以外の場合、行内のいずれかのセルが、 表のインライン軸に沿った最後のベースライン整列に参加する場合、 その整列ベースラインから 生成する。
-
それ以外の場合、行が空でなければ、 行内のすべてのセルの最も低い位置と最も高い位置にある内容辺から 合成する。 CSS 2 § 17.5.3 表の高さのアルゴリズムを参照。
-
それ以外の場合、 表の 行ボックス自体のblock-start側の内容 辺を 整列ベースラインとして使用する。
この目的では、 複数の行にまたがる表セルは、 そのまたがる範囲がこの行から始まらない場合は無視される。 ただし、ステップ2では、 その範囲がこの行で終わらない場合に無視される。
最後のベースラインについても同様である （「最初」／「最後」と「開始」／「終了」を入れ替える）。
複数行にまたがるセルは、その範囲の最初／最後の行でのみ first baseline/last baselineに参加する。
-
- フレックスコンテナー
- [CSS-FLEXBOX-1]の フレックスのベースラインを参照。
- グリッドコンテナー
- [CSS-GRID-1]の グリッドのベースラインを参照。
単一のベースラインからボックスのベースラインを生成するには、 そのボックスのフォント設定と最初に 利用可能なフォントからベースライン表を使用し、 そのベースライン集合を指定された単一のベースラインに整列させる。
ベースライン整列に参加するボックスに ベースライン集合がない場合、 その整列 ベースラインは、 参加している整形コンテキストの規則に従って 合成される。 矩形（または2本の平行線）から ベースラインを合成するには、 行下側の 線からアルファベットベースラインを合成し、 2つの辺または線の位置を平均して中央ベースラインを合成する。 追加のベースラインを合成する規則については、CSS インラインレイアウト 3 § A 整列メトリクスの合成を参照。
注: ボックスからベースラインを合成するために使用される辺は、 その整形コンテキストによって異なる。 インラインレベルボックスはマージン辺から合成し、[CSS-INLINE-3]、 表セルは内容辺から合成し、[CSS2]、 グリッドアイテムとフレックスアイテムはボーダー辺から合成する。[CSS-GRID-1] [CSS-FLEXBOX-1]。
一般に、整列されるボックス、図形、その他のオブジェクトの書字モードを使用して、 合成のための行下側と 行上側の辺を決定する。 ただし、その書字モードの ブロック進行方向が 整列コンテキストの軸と平行である場合、 軸に適合する書字モードを仮定しなければならない。
-
それ以外の場合:
-
ボックス自身の書字モードが縦書きである場合、 horizontal-tbと仮定する。
-
ボックス自身の書字モードが横書きである場合、 directionがltrならvertical-lrを仮定し、 directionがrtlならvertical-rlを仮定する。
-
ボックスのベースラインを求める際には、 そのボックスと、フロー内の子孫のうちブロック軸スクロールコンテナーであるものすべてを、 初期スクロール位置までスクロールされたものとみなさなければならない。 さらに、 スクロールコンテナーの最初／最後のベースラインの位置が そのボーダー辺の外側にある場合、 そのベースラインの位置はボーダー辺に制限される。
9.2. ベースライン整列グループ化
ベースライン共有 グループは、 ベースライン整列にともに参加するボックスで構成される。 これは、次の両方の条件を満たす場合にのみ可能である。
- ベースライン整列が行われる軸に垂直な軸に沿って、整列コンテキストを共有する。 （例えば、align-self: baseline を持つグリッドアイテムは、グリッドの ブロック軸に沿ってベースライン整列を行うため、 同じ行の他のアイテムとともに参加する。）
- 互換性のあるベースライン整列の優先設定を持つ （つまり、整列させようとするベースラインが整列コンテキストの同じ側にある）。
注: ベースライン 内容整列に参加するボックスと、 ベースライン自己整列に参加するボックスは、 同じベースライン共有グループに属することができ、 したがって、互いに整列できる。 これら 2 つの方法の違いは、 整列を行うために余分な空間を挿入する位置 （ボックス自身の境界の内側か外側か）にある。
ボックスは、特定の軸に沿って、 特定のボックスによって確立された 整列 コンテキストを、 次のいずれかに該当する場合に共有する。
- 同じ行の表セルであり、行ボックスによって確立された表の行（インライン）軸に沿って整列する場合
- 同じ行のグリッドアイテムであり、グリッドコンテナーによって確立されたグリッドの行（インライン）軸に沿って整列する場合
- 同じ列のグリッドアイテムであり、グリッドコンテナーによって確立されたグリッドの列（ブロック）軸に沿って整列する場合
- 同じフレックス行のフレックスアイテムであり、フレックスコンテナーによって確立された、その主軸に沿って整列する場合
注: 概念的には、 行ボックス内のインラインレベルのボックスも自己整列コンテキストを共有し、 ベースライン共有グループに参加する。 ただし、これらは vertical-align プロパティによってのみベースライン整列を行い、 このモジュールで定義されるいずれのプロパティによっても行わない。 [CSS-INLINE-3] を参照。
ボックスが複数の共有整列コンテキストにまたがる場合、 その軸に沿って最も始端側／終端側にある 内で 最初／最後のベースライン整列に参加する。 例えば、3 行にまたがる表セルは、 またがる最初の行の表セルとともに最初のベースライン整列に参加するか、 または、またがる最後の行の表セルとともに 最後のベースライン整列に参加する。
ベースライン共有グループ内の 2 つのボックスのベースライン整列の優先設定は、 次のいずれかの条件を満たす場合、互換性がある。
-
同じブロックの進行方向と同じベースライン 整列の優先設定を持つ場合
-
反対のブロックの進行方向と反対のベースライン 整列の優先設定を持つ場合
9.3. ボックスのベースライン整列
単一のベースライン共有グループに属する 整列 対象の集合とそのベースラインが与えられた場合、 整列対象は次のようにベースライン整列される。
-
グループの整列コンテキストの最初に利用可能なフォントから ベースライン共有グループのベースライン表を生成し、 さらに、それらの中央ベースラインを揃えて、このベースライン表の鏡像も重ね合わせる。 これらが、整列対象を整列させるベースラインの「グリッド」となる。
-
各整列対象を、指定された整列ベースラインによって、 グループのベースライン表または その鏡像のうち、整列 対象の行の向きに一致する方に整列させる。 別途指定されていない限り（例えば、alignment-baseline プロパティによって）、 整列ベースラインは、整列コンテキストの 主要ベースラインとなる。
-
整列されたベースライン共有グループを、 そのフォールバック整列に従って 整列 コンテナー内に配置する。 ベースライン共有グループの フォールバック整列は、 そのアイテムのフォールバック整列を 物理的な方向に解決したものである。
-
最初／最後のベースライン内容整列の場合、 ベースライン共有グループ内のベースライン整列を維持しながら、 整列コンテキスト内のすべての 整列コンテナーの始端／終端のマージン辺を揃えるため、 整列コンテナーの始端／終端の内容辺と 整列 対象の辺との間に、 必要最小限の追加の空間を挿入する。
付録A: 静的配置用語
ある軸の インセットプロパティが両方とも auto で、 絶対配置ボックスに対して指定されているとき、 CSS2はその 静的位置 を サイズや位置の決定に使います。 CSS2.1§10.3.7 を参照してください。 ボックス整列プロパティは 他のレイアウトモードと同様に、これらの計算も修正します。 これらの修正は、静的位置矩形を参照します。 その矩形の各辺は、ボックスの 静的位置を その 包含ブロックの各側から表しています。
静的位置矩形とそれに対応する静的位置は、 「仮想ボックス」のレイアウトモデルによって定義されます：
- ブロックレイアウト
- ブロックレベルボックスの静的位置は、 [CSS2] 第10章で定義される。 静的位置矩形は、厚さがゼロの矩形であり、 ボックスの静的位置包含ブロックの インライン軸方向の両辺の間に広がり （CSS2§10.3.7 を参照）、 そのブロック始端側の静的 位置に配置される （CSS2§10.6.4 を参照）。
- インラインレイアウト
- インラインレベルボックスの静的位置は、 [CSS2] 第10章で定義される。 静的位置矩形は、厚さがゼロの矩形であり、 その「仮想ボックス」を含むはずの 行ボックスの行の上側／行の下側の 両辺の間に広がり （CSS2§10.3.7 を参照）、 そのインライン始端側の静的 位置に配置される。
- フレックスレイアウト
- フレックスコンテナーの子の静的位置矩形は、 フレックス コンテナーの内容辺に対応する。 CSS フレックスボックス 1 § 4.1 絶対位置指定されたフレックスの子を参照。
- グリッドレイアウト
- デフォルトでは、グリッドコンテナーの子の静的位置矩形は、 グリッド コンテナーの内容辺に対応する。 ただし、そのグリッドコンテナーが ボックスの実際の包含ブロックも確立する場合、 代わりにグリッド配置プロパティによって指定される グリッド領域が、その静的位置矩形を確立する。 [CSS-GRID-1] のグリッドコンテナーの 子の静的位置を参照。
10. 変更点
2026 年 1 月 30 日の作業 草案以降の変更点は次のとおり。
-
gap プロパティを[css-gaps-1] に移動した。 （課題 13312）
-
safe を使用して、絶対位置指定されたボックスをその元の包含ブロック内に制限するようにした。 （課題 14008）
-
コンテナーが一方の軸でのみスクロール可能になり得ることを踏まえ、 スクロールコンテナーの特別な処理を各軸で独立して行うことを明確化した。 （課題 12289）
-
根本的にサポートされていない値を有効な値として解析してはならないことを注意事項として追加した。 （13421）
11. プライバシーに関する考慮事項
これは単純なレイアウト仕様なので、 新たなプライバシーに関する考慮事項はありません。
12. セキュリティに関する考慮事項
これは単純なレイアウト仕様なので、 新たなセキュリティに関する考慮事項はありません。
謝辞
特別な感謝を David Baron, Javier Fernandez, Markus Mielke, Alex Mogilevsky, そしてCSSWGの2008年3月F2F整列ディスカッション参加者に捧げます。 彼らは本仕様で説明される整列モデルに貢献しました。 また、Melanie Richards氏には各種整列キーワードの図解作成に感謝します。