CSS によるボックスの整列 — CSS Box Alignment Module Level 3

1.1. ~module間の相互作用

この~moduleは【新たな整列~propにより】： ◎ This module＼

• 塊~layout~model （ `CSS2$r, `§ 視覚-整形~model＠~CSS2J#visuren$, `§ 視覚-整形~modelの詳細＠~CSS2J#visudet$） に，いくつかの新たな整列~能力を追加する。 ◎ adds some new alignment capabilities to the block layout model described in [CSS2] chapters 9 and 10,＼
• `塊~levelの~box$における拘束され過ぎな~marginをどう解決するかを定義し直す （`§ 塊~levelの~box＠#justify-block$）。 ◎ redefines how overconstrained block-level box margins are resolved,＼
• これらの新たな整列~propと［ `vertical-align$p を利用することによる~table~cell内容の整列 （`CSS2$r `§ ~tableの高さ＠~CSS2TABLE#height-layout$） ］との相互作用を定義する。 ◎ and defines the interaction of these new alignment properties with the alignment of table cell content using vertical-align, as defined in [CSS2] chapter 17.

これらの~propと［ `格子~layout$／`~flex~layout$ ］との相互作用は、 それを定義する~moduleにて定義される。 ここでの~prop定義は、 `CSS-FLEXBOX-1$r によるそれに取って代わる （そこでの とり得る値は，ここでの値の部分集合である）。 ◎ The interaction of these properties with Grid Layout [CSS-GRID-1] and Flexible Box Layout [CSS-FLEXBOX-1] is defined in their respective modules. The property definitions here supersede those in [CSS-FLEXBOX-1] (which have a smaller, earlier subset of permissible values).

この~moduleに定義される どの~propも［ `first-line$pe ／ `first-letter$pe ］疑似要素には適用されない。 ◎ No properties in this module apply to the ::first-line or ::first-letter pseudo-elements.

1.2. 値~定義

【 この節の内容は、 `~CSS日本語訳 共通~page＠~CSScommon#values$に移譲。 】

1.3. 部分的な実装

この~moduleにおける特能の~supportは、［ それに影響される種々の~layout~modelに対応する様々な実装~段階 ］の下で，配備されることになると予期されるので、［ 未~supportな~keywordを無効として扱うよう要求する `§ 部分的な実装~用の規則＠~CSSSNAPSHOT#partial$ ］は，次に該当する整列~keyword 【, および それを値にとる~prop，の組】 にも適用されることをここに明確化しておく ⇒ 実装が~supportする~layout~moduleのうち，次に該当するものが一つでもある ⇒ その~layoutにおいて、 当の~keywordを値にとる~propを一般には~supportするが， その~propに対する当の~keywordによる特能は ~supportしていない。 ◎ Since it is expected that support for the features in this module will be deployed in stages corresponding to the various layout models affected, it is hereby clarified that the rules for partial implementations that require treating as invalid any unsupported feature apply to any alignment keyword which is not supported across all layout modules to which it applies for layout models in which the implementation supports the property in general.

例えば実装が［ 格子 `CSS-GRID-1$r, ~flex `CSS-FLEXBOX-1$r ］に対しては `align-self$p を~supportしているとする。 このとき，例えば~keyword `start$v について： ◎ For example, if an implementation supports align-self in [CSS-GRID-1] and [CSS-FLEXBOX-1], then＼

• 実装は、 `start^v を［ 格子, ~flex ］両~容器で~supportしていない限り，それを無効と扱うモノトスル。 ◎ it must treat start as invalid unless it is supported in both grid and flex containers.＼
• 同じ実装が塊~levelの要素に対しては `align-self$p を全く~supportしていない場合 — したがって，それらに対する `start^v の実装を欠いてる場合 — でも、 格子, ~flexに対する `start^v を無効と扱うことは要求されない。 ◎ However if that same implementation does not support align-self for block-level elements at all, then a lack of implementation of align-self: start does not trigger this requirement to treat it as invalid.

4.1. 位置的~整列： `center^v, `start^v, `end^v, `self-start^v, `self-end^v, `flex-start^v, `flex-end^v, `left^v, `right^v ~keyword

各種 `位置的~整列@ ~keywordは、 `整列~subject$の位置を，その`整列~容器$を~~基準に指定する。 ◎ The positional alignment keywords specify a position for an alignment subject with respect to its alignment container.

各種~値の意味は、 値を利用する~propが対象にしている軸~沿いにおいて： ◎ Values have the following meanings:

`center@v

`整列~subject$を`整列~容器$の中で中央寄せにする。 ◎ center (self, content) ◎ Centers the alignment subject within its alignment container.

`start@v

`整列~subject$が`整列~容器$の始端~辺に接合されるように整列する。 ◎ start (self, content) ◎ Aligns the alignment subject to be flush with the alignment container’s start edge in the appropriate axis.

`end@v

`整列~subject$が`整列~容器$の終端~辺に接合されるように整列する。 ◎ end (self, content) ◎ Aligns the alignment subject to be flush with the alignment container’s end edge in the appropriate axis.

`self-start@v

`*-content^p ~propには利用できない。

`整列~subject$の始端~辺が`整列~容器$の同じ側にある辺に接合されるように整列する。 ◎ self-start (self) ◎ Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s start side in the appropriate axis.

`self-end@v

`*-content^p ~propには利用できない。

`整列~subject$の終端~辺が`整列~容器$の同じ側にある辺に接合されるように整列する。 ◎ self-end (self) ◎ Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s end side in the appropriate axis.

`flex-start@v

`flex-end@v

これらの値が利用されるのは、 `~flex~layout$に限られる。 `CSS-FLEXBOX-1$r ◎ ↓

`整列~容器$ — すなわち`~flex容器$ — の各~辺のうち［ 次に与える側にあって，~propが対象にする軸~沿いにある方 ］に`整列~subject$が接合されるように整列する：

• `flex-start$v に対しては、 `主-始端$, または`交叉-始端$
• `flex-end$v に対しては、 `主-終端$, または`交叉-終端$

［ `flex-start$v ／ `flex-end$v ］値が~flex整形~文脈の外側で利用されたとき — すなわち、 次のいずれかに該当するとき — の挙動は［ `start$v ／ `end$v ］と同じになる：

• `~flex駒$でない~box （または、 `~flex容器$の子であって`絶対的に位置され$た~boxの`静的~位置$を決定するときなど，~flex駒を装う~box）上で，`自己-整列~prop$に利用されたとき
• `~flex容器$でない~box上で，`内容-分布~prop$に利用されたとき

◎ flex-start (self, content) ◎ Only used in flex layout. [CSS-FLEXBOX-1] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate. ◎ When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties. ◎ flex-end (self, content) ◎ Only used in flex layout. Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-end or cross-end side, as appropriate. ◎ When used outside of a flex formatting context, this value behaves as end. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as end when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as end when used in the content-distribution properties.

`left@v

`right@v

利用できるのは `justify-*^p ~propに限られる。 ◎ ↓

`整列~容器$の各~辺のうち［ 次に与える側にあって，適切な軸にある方 ］に`整列~subject$が接合されるように整列する：

• `left$v に対しては、 `行-左端$, または（物理的）`左端$
• `right$v に対しては、 `行-右端$, または（物理的）`右端$

~propが対象にする軸が 左端↔右端 軸と平行でない場合†、 これらの値は `start$v と同じに挙動する。

注記：† 現時点では、 そのような事例は［ `flex-direction$p が `column$v にされた`~flex容器$【！column flexbox】 ］に限られる。

◎ left (only justify-*) ◎ Aligns the alignment subject to be flush with the alignment container’s line-left or physical left edge, whichever is in the appropriate axis. ◎ If the property’s axis is not parallel with either left↔right axis, this value behaves as start.＼ Currently, the only case where the property’s axis is not parallel with either left↔right axis is in a column flexbox. ◎ right (only justify-*) ◎ Aligns the alignment subject to be flush with the alignment container’s line-right or physical right edge, whichever is in the appropriate axis. ◎ If the property’s axis is not parallel with either left↔right axis, this value behaves as start.＼ Currently, the only case where the property’s axis is not parallel with either left↔right axis is in a column flexbox.

これらの値の一部は、 次の 2 つの文法~項を利用して表現される： ◎ Two grammar terms are used to denote certain subsets of these values:

`self-position$t

この集合は、［ `justify-self$p ／ `align-self$p ］から利用され， ~boxをその`整列~容器$の中で整列する。 加えて、［ `justify-items$p ／ `align-items$p ］からも （［ `justify-self$p ／ `align-self$p ］用の既定の値を指定するために） 利用される。 ◎ This set is used by justify-self and align-self to align the box within its alignment container, and also by justify-items and align-items (to specify default values for justify-self and align-self).

`self-position@t
	= `center$v
	| `start$v
	| `end$v
	| `self-start$v
	| `self-end$v
	| `flex-start$v
	| `flex-end$v

`content-position$t

この集合は、［ `justify-content$p ／ `align-content$p ］から利用され， ~boxの中で~box自身の内容を整列する。 ◎ This set is used by justify-content and align-content to align the box’s contents within itself.

`content-position@t
	= `center$v
	| `start$v
	| `end$v
	| `flex-start$v
	| `flex-end$v

注記： ［ `left$v, `right$v ］は、［ `self-position$t, `content-position$t ］からは除外される — これらは［ `justify-content$p ／ `justify-self$p ／ `justify-items$p ］用の妥当な位置的~整列~値であるが， `align-*^p には許容されないので。 これらの値は、 代わりに `justify-*^p ~propの文法に明示的に含められている。 ◎ Note: left and right are excluded from <self-position> and <content-position>, despite being valid positional alignment values for justify-content/justify-self/justify-items, because they are not allowed in the align-* properties. They are instead explicitly included in the justify-* properties’ grammars.

`直交~flow$の下での `start$v, `end$v と縦横 両~軸の~~関係をもっと解りやすくする。 ◎ Make it easier to understand the dual-axis nature of "start" and "end" wrt orthogonal flows.

4.2. 基底線の整列： `baseline^v ~keywordと `first^v／`last^v 改変子

`CSS-WRITING-MODES-3$r `§ 基底線 — 序論＠~CSSWM#intro-baselines$ も見よ。 ◎ See CSS Writing Modes 3 § 4.1 Introduction to Baselines.

各種 `基底線~整列@ は、 位置的な整列の一種であり，［ 同じ`整列~文脈$を共有する複数個の`整列~subject$ （同じ~rowの中の各~cellなど） ］を［ 互いの`整列~基底線$が合致する ］ように整列させる。 ［ `基底線-共有~group$における`整列~subject$の位置 ］が`基底線~整列$により全部的に拘束されない場合 （すなわち、 当の`整列~容器$の中で，`基底線~整列$は保守しつつ ズラすこともできる場合）、 それらの整列~subjectは，各自の`基底線~整列$を保全しつつ アリな限り`~fallback整列-$される。 ◎ Baseline alignment is a form of positional alignment that aligns multiple alignment subjects within a shared alignment context (such as cells within a row) by matching up their alignment baselines. If the position of the alignment subjects within a baseline-sharing group is not fully constrained by baseline alignment (i.e., they could be shifted within their respective alignment containers while maintaining baseline-alignment), they are fallback-aligned insofar as possible while preserving their baseline alignment.

各種 `基底線~整列$~keywordは、 文法においては `baseline-position$t で表現される： ◎ The baseline alignment keywords are represented with the <baseline-position> grammar term:

`baseline-position@t
	= [ `first$v | `last$v ]? && `baseline$v

【 以下に現れる［ “基底線” ／ “整列” ］を含む用語は、 どれも，［ これらの値を利用している~prop ］が対象にする軸に対応する方を指す。 】

値［ `first$v ／ `last$v ］は、 ~boxの `基底線~整列~選好@ として［ “最初” ／ “最後” ］を与える — 省略時の既定は “最初” とする。 ◎ The first and last values give a box a baseline alignment preference: either “first” or “last”, respectively, defaulting to “first”.

各種~値の意味は： ◎ Values have the following meanings:

`baseline@v

`first baseline$v に算出される。 ◎ Computes to first baseline, defined below.

`first baseline@v

~boxは `最初の基底線による整列@ に関与するものと指定する： ［ ~boxの`最初の基底線~集合$に属する`整列~基底線$ ］と［ ~boxが属する`基底線-共有~group$の対応する基底線 ］とが整列されることになる。 詳細は、 `§ 基底線による~boxたちの整列-法$を見よ。 ◎ Specifies participation in first-baseline alignment: aligns the alignment baseline of the box’s first baseline set with the corresponding baseline of its baseline-sharing group. See § 9.3 Aligning Boxes by Baseline for more details.

この値~用の`~fallback整列$は、［ `自己-整列$用には `safe self-start^v ／ `内容~分布$用には `safe start^v ］とする。 ◎ The fallback alignment for first baseline is safe self-start (for self-alignment) or safe start (for content-distribution).

`last baseline@v

~boxは `最後の基底線による整列@ に関与するものと指定する： ［ ~boxの`最後の基底線~集合$に属する`整列~基底線$ ］と［ ~boxが属する`基底線-共有~group$の対応する基底線 ］とが整列されることになる。 詳細は、 `§ 基底線による~boxたちの整列-法$を見よ。 ◎ Specifies participation in last-baseline alignment: aligns the alignment baseline of the box’s last baseline set with the corresponding baseline of its baseline-sharing group. See § 9.3 Aligning Boxes by Baseline for more details.

この値~用の`~fallback整列$は、［ `自己-整列$用には `safe self-end^v ／ `内容~分布$用には `safe end^v ］とする。 ◎ The fallback alignment for last baseline is safe self-end (for self-alignment) or safe end (for content-distribution).

これらの値が `align-content$p に指定された場合、 `基底線による内容-整列$を誘発する — すなわち、 `内容~box$の中で~boxの内容をズラすことに加え，~box自身の~sizingにも影響し得る。 `§ 基底線による内容-整列＠#baseline-align-content$ を見よ。 ◎ When specified for align-content, these values trigger baseline content-alignment, shifting the content of the box within its content box, and may also affect the sizing of the box itself. See § 5.4 Baseline Content-Alignment.

これらの値が［ `align-self$p ／ `justify-self$p ］に指定された場合、 `基底線による自己-整列$を誘発する — すなわち、 ~box全体をその容器の中でズラすことに加え，その容器の~sizingにも影響し得る。 `§ 基底線による自己-整列＠#baseline-align-self$ を見よ。 ◎ When specified for align-self/justify-self, these values trigger baseline self-alignment, shifting the entire box within its container, which may affect the sizing of its container. See § 6.4 Baseline Self-Alignment.

~boxに`基底線による自己-整列$が指定されたときは、 最初に`内容~分布$が遂行されてから，結果の［ ~boxと その内容 ］に対し`自己-整列$が遂行される。 しかしながら，［ ~boxが同じ軸において`基底線による内容-整列$も伴う場合 ／ ~boxの同じ軸における`内容-分布~prop$に `~normalJC$v が指定された場合 ］、 その軸における~boxの`内容-分布~prop$の`使用~値$は， ~boxの`基底線~整列~選好$が［ “最初” の`基底線による自己-整列$を成す場合は `start$v ／ “最後” の`基底線による自己-整列$を成す場合は `safe end^v ］になる。 ◎ When baseline self-alignment is specified on a box, content distribution is performed first, then the resulting box and its contents are self-aligned However, if the box also has baseline content-alignment in the same axis or if its content-distribution property in the same axis is normal, its used content-distribution property in that axis is start or safe end for a baseline alignment preference of its baseline self-alignment of “first” or “last”, respectively.

画像による例をここに追加する。 ◎ Add example images here.

属する`整列~文脈$がない~boxに対しては、 `~fallback整列$が利用される。 例えば， 塊~boxの `align-content$p に `baseline$v が指定された場合、 `start$v 整列に~fall-backする。 `~fallback整列$は、 `整列~容器$の中で`基底線-共有~group$を整列するためにも利用される。 ◎ If a box does not belong to a shared alignment context, then the fallback alignment is used. For example, align-content: baseline on a block box falls back to start alignment. The fallback alignment is also used to align the baseline-sharing group within its alignment container.

注記： ~CSSOMは `first baseline$v を `baseline$v に直列化する — これら等価であり, 後者の方が短いので。 `CSSOM-1$r `§ ~CSS値の直列化-法＠~CSSOM1#serializing-css-values$ を見よ。 ◎ Note: Because they are equivalent, and baseline is shorter, the CSSOM serializes first baseline as baseline. See CSSOM § 6.7.2 Serializing CSS Values.

注記： ある面で関係する `vertical-align$p ~propに対しては、 `CSS2$r の一貫でない設計に因り， `baseline$v は `first baseline$v と等価でない — `行内~levelの~box$の`基底線~整列~選好$は `display$p に依存するので （例： `inline-block$v は，最後の基底線を既定で利用する一方で、 `inline-table$v は，最初の基底線を既定で利用する）。 ◎ Note: For the somewhat-related vertical-align property, due to inconsistent design decisions in CSS2.1, baseline is not equivalent to first baseline as an inline-level box’s baseline alignment preference depends on display. (E.g., inline-block uses its last baseline by default, while inline-table uses its first baseline by default.)

4.3. 分布型の整列： `stretch^v, `space-between^v, `space-around^v, `space-evenly^v ~keyword

各種 `分布型の整列@ 値は、 容器の余分な空間を`整列~subject$たちに分散するために，［ `justify-content$p ／ `align-content$p ］にて利用される。 ◎ The distributed alignment values are used by justify-content and align-content to disperse a container’s extra space among its alignment subjects.

空間をこの仕方で分配できない場合、 これらの値は その`~fallback整列$に従って挙動する。 各 分布~値には、 既定の`~fallback整列$が結付けられる。 （この~moduleの将来~levelでは、 `~fallback整列$を明示的に指定することも許容され得る。） ◎ When space cannot be distributed in this way, these values behave as their fallback alignment. Each distribution value has an associated default fallback alignment. (A future level of this module may allow the fallback alignment to be specified explicitly.)

`space-between@v

`整列~subject$たちは、 `整列~容器$内で均等に分布される。 ［ 最初／最後 ］の`整列~subject$は，`整列~容器$の同じ側にある辺に接合されるように置かれ、 残りの`整列~subject$たちは，［ 隣接な`整列~subject$どうしの合間におけるアキ ］がすべて同じになるよう分布される。 ◎ The alignment subjects are evenly distributed in the alignment container. The first alignment subject is placed flush with the start edge of the alignment container, the last alignment subject is placed flush with the end edge of the alignment container, and the remaining alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same.

この値~用の既定の`~fallback整列$は `safe flex-start^v とする。 （ `~flex~layout$以外の~layout~mode下では、 `flex-start$v は `start$v に一致する。） ◎ The default fallback alignment for this value is safe flex-start. (For layout modes other than flex layout, flex-start is identical to start.)

`space-around@v

`整列~subject$たちを、［ 最初／最後 ］の`整列~subject$の［ 前／後 ］に，他の整列~subjectどうしの合間に半分の空間を与えることを除いて， `space-between$v のときと同様に分布させる。 ◎ The alignment subjects are evenly distributed in the alignment container, with a half-size space on either end. The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same, and the spacing before the first and after the last alignment subject is half the size of the other spacing.

この値~用の既定の`~fallback整列$は `safe center^v とする。 ◎ The default fallback alignment for this value is safe center.

`space-evenly@v

`整列~subject$たちを、［ 最初／最後 ］の`整列~subject$の［ 前／後 ］に，他の整列~subjectどうしの合間と同じ空間を与えることを除いて， `space-between$v のときと同様に分布させる。 ◎ The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end. The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same.

この値~用の既定の`~fallback整列$は `safe center^v とする。 ◎ The default fallback alignment for this value is safe center.

`~stretchAC@v

`整列~subject$たちの合計~sizeが`整列~容器$の~sizeより小さい場合に、 合計~sizeが`整列~容器$を正確に埋めるように，［ `整列~subject$たちのうち，~sizeが `auto^v にされたもの ］の~sizeを，その［ `max-height$p ／ `max-width$p ］（あるいは等価な機能性）により課される拘束は守りつつ，等しく増やす（比例的にではなく）。 ◎ If the combined size of the alignment subjects is less than the size of the alignment container, any auto-sized alignment subjects have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.

この値~用の既定の`~fallback整列$は `flex-start$v とする。 （ `~flex~layout$以外の~layout~modeの下では、 `flex-start$v は `start$v と一致する。） ◎ The default fallback alignment for this value is flex-start. (For layout modes other than flex layout, flex-start is identical to start.)

注記： この `~stretchAC$v の定義は、 `内容-分布~prop$に適用される。 `自己-整列~prop$［ `justify-self$p ／ `align-self$p ］用には， 自前の［ `~stretchJS$v ／ `~stretchAS$v ］値がある — それは、 `整列~容器$に正確に収まることを確保するよう，`整列~subject$を［ 拡幅し得る／`縮短し得る^em ］。 ◎ Note: This `align-content/stretch` definition applies to the content-distribution properties; the self-alignment properties justify-self/align-self have their own stretch value, which can grow or shrink the alignment subject to ensure it exactly fits the alignment container.

これらの値は、 文法においては `content-distribution$t で表現される： ◎ These values are represented with the <content-distribution> grammar term:

`content-distribution@t
	= `space-between$v
	| `space-around$v
	| `space-evenly$v
	| `~stretchAC$v

4.4. ~overflow時の整列： `safe^v, `unsafe^v ~keywordと~scroll安全用の制限s

一部の状況においては、 指定されとおり正確に整列すると，`整列~subject$が`整列~容器$を~overflowする結果、 場合によっては，一部の~dataに~accessし得なくなる。 例えば，ある~sidebarの内容が無条件に中央寄せにされた場合、 ~overflowするほど十分に大きい~itemは， 表示域の始端~辺を超えて~scrollし得ない所まで拡がるかもしれない。 ◎ In some situations, aligning exactly as specified would cause the alignment subject to overflow its alignment container, possibly causing data loss. For example, if the contents of a sidebar are unconditionally centered, items large enough to overflow it might extend beyond the viewport’s start edge, which can’t be scrolled to.

`overflow-position@t
	= `unsafe$v
	| `safe$v

`safe@v

`整列~subject$の~sizeが`整列~容器$を~overflowする場合、 `整列~subject$は，整列~modeが `start$v であったかのように整列される。 ◎ If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were start.

`unsafe@v

`整列~subject$の［ `整列~容器$に対する相対的な~size ］に関わらず，所与の整列~値は尊守される。 ◎ Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.

（値が指定されなかった場合） ◎ (no value specified)

`~overflow整列$が明示的に指定されていない場合の “既定の” 整列【！~mode】は、 `safe$v と `unsafe$v の合子の様になる。 詳細は、 `§ ~overflow時の自動的な安全用の整列＠#auto-safety$ を見よ。 ◎ If the overflow alignment isn’t explicitly specified, the default overflow alignment is a blend of “safe” and “unsafe”. See § 4.4.1 Automatic Overflow Alignment Safety for details.

5.1. 内容の分布： `align-content^p, `justify-content^p ~prop

どの~layout~modeにおいても，`整列~subject$と`整列~容器$の`書字~mode$は、 これらの `*-content^p ~propが設定された~boxのそれと`見做す$。 ◎ For all layout modes, the alignment subject and alignment container both assume the writing mode of the box the *-content property is set on.

5.2. 内容-分布 略式：`place-content$p ~prop

この`略式~prop$は、 `align-content$p, `justify-content$p 両~propを単独の宣言で設定する。 2 個の値は、 順に前者, 後者の~propにアテガわれる。 2 個目の値が省略された場合、 後者の~propには［ 1 個目の値が `baseline-position$t ならば `start$v ／ ~ELSE_ 1 個目の値 ］がアテガわれる。 ◎ This shorthand property sets both the align-content and justify-content properties in one declaration. The first value is assigned to align-content. The second value is assigned to justify-content; if omitted, it is copied from the first value, unless that value is a <baseline-position> in which case it is defaulted to start.

5.3. 整列~overflowと~scroll容器

`内容-分布~prop$が［ ~overflowしている`整列~subject$を伴う`~scroll容器$ ］に設定されたときは、 【当の容器の】`到達-不能な~scroll可能な~overflow領域$【！の clipping】を［ 当の`整列~subject$は，その `start$v に整列された位置へ~scrollできることを確保する ］ために十分なだけ抑制するようになる。 ◎ When the content-distribution properties are set on a scroll container with an overflowing alignment subject, they reduce the clipping of the negative scrollable overflow region just enough to ensure that alignment subject can be scrolled into its start-aligned position.

例えば、 ~scroll可能な`~flex容器$ %容器 の `justify-content$p が `flex-end^v （あるいは， `flex-flow$p が `row-reverse$v にされた下では `flex-start^v ） に設定された場合、 %容器 の`~flow内$にある内容 %内容 は， 初期~時は［ %内容 の`主-終端$辺が %容器 の`主-終端$辺と整列する ］よう位置されることになる — ~overflowした %内容 は %容器 の`主-始端$辺を~overflowするように現れるよう。 しかしながら、 利用者は，~overflowしている %内容 を~viewするために`上^emへ【 %内容 の始端へ】~scroll可能になる — `justify-content$p に `flex-start^v が指定されたかのように。 ◎ For example, if a scrollable flex container is set to justify-content: flex-end (or justify-content: flex-start with flex-flow: row-reverse), its in-flow content will be initially positioned to align the main-end edge of its content to the main-end edge of the flex container, and its content will appear to overflow its main-start edge. However, the viewer will be able to scroll up to view the overflowing in-flow content, just as if justify-content: flex-start had been specified.

この画像も置換する。 ◎ Replace this image too.

注記： ~scrollbarの有無に応じて、 `~scroll容器$の`内容~box$の~sizeは変化し得る — それに伴い，`整列~容器$や`整列~subject$の~sizeも。 ◎ Note: The presence of scrollbars can change the size of the scroll container’s content box—and thus the size of the alignment container and/or alignment subject.

5.4. 基底線による内容-整列

~rowを連ねる様な~layout文脈に関与している（同じ`整列~文脈$を共有する）~boxたちの内容は、 互いの基底線を整列できる。 `基底線による内容-整列@ は、［ 同じ`基底線-共有~group$に属する各~box ］の内容の`整列~基底線$を互いに整列するために， 実質的に~boxの~paddingを増やす。 ◎ The content of boxes participating in row-like layout contexts (shared alignment contexts) can be baseline-aligned to each other. Baseline content-alignment effectively increases the padding on the box to align the alignment baseline of its contents with that of other baseline-aligned boxes in its baseline-sharing group.

`基底線による内容-整列$を適用できるのは、 `align-content$p 軸が~boxの`塊-軸$に平行である場合に限られる （例えば、 `~flex容器$のうち［ `flex-direction$p に `column$v が指定されたもの ］【！column flexbox】には適用されない）。 さもなければ、 `~fallback整列$が利用される。 ◎ Baseline content-alignment can only apply if the align-content axis is parallel with the box’s block axis (i.e. it does not apply to “column” flex containers); otherwise the fallback alignment is used.

［ 最初／最後 ］の`基底線による内容-整列$に関与する~boxたちの集合は、 ~layout~modelに依存する（以下， “／” は同順）： ◎ The set of boxes that participate in baseline content-alignment depends on the layout model:

~table~cell： ◎ Table Cells:

~AND↓ を満たす（`置換され$ない†）~table~cellたち：

• ~spanする最も［ 始端／終端 ］側の~rowは、 互いに同じである
• ~cellの`行内-軸$は~tableのそれと平行である
• `align-content$p の算出d値は［ `first baseline$v ／ `last baseline$v ］

【† `置換され$る要素は， `align-content$p の適用-対象でない。】 ◎ A (non-replaced) table cell participates in first/last baseline content-alignment in its startmost/endmost row if its inline axis is parallel to that of the table itself and its computed align-content is first baseline (last baseline).

注記： 同じ~colを共有する~cellどうしの`基底線による内容-整列$は、 ~supportされない。 しかしながら，将来~levelでは、 十分な需要と実装者からの関心があれば，追加され得る。 ◎ Note: Baseline content-alignment of cells sharing a column is not supported; however this may be added in a future level if there is sufficient demand and implementer interest.

`~flex駒$： ◎ Flex Items:

~AND↓ を満たす（`置換され$ない）`~flex駒$たち：

• 互いに同じ`~flex行l$内にある
• `align-content$p の算出d値は［ `first baseline$v ／ `last baseline$v ］
• `行内-軸$は`主-軸$に平行である

◎ A non-replaced flex item participates in first/last baseline content-alignment in its flex line if its computed align-content is first baseline/last baseline and its inline axis is parallel to the main axis.

`格子~駒$： ◎ Grid Items:

~AND↓ を満たす（`置換され$ない）`格子~駒$たち：

• ~spanする最も［ 始端／終端 ］側の`格子~筋$ — `行内-軸$に平行な方 — は、 互いに同じである
• `align-content$p の算出d値は［ `first baseline$v ／ `last baseline$v ］

◎ A non-replaced grid item participates in first/last baseline content-alignment in its startmost/endmost row or column (whichever is parallel to its inline axis) and if its computed align-content is first baseline/last baseline.

加えて，~boxが`基底線による内容-整列$に関与するためには — 関連な辺において，~boxが［ 同じ`基底線-共有~group$に属する他の~box ］と揃うことを保証するため — ~boxの `自己-整列~選好は協調され@ なければナラナイ。 すなわち，~boxの`基底線~整列~選好$が［ “最初” ／ “最後” ］の場合、 ~boxの［ `始端$／`終端$ ］`~margin辺$は［ ~boxの`包含塊$の対応している`辺$ ］に整列するよう意図され — かつ実際に整列する — ようにするモノトスル。 さもなければ、 ~boxの`~fallback整列$を採るとする。 ◎ Additionally, in order to participate in baseline content-alignment it must also have a coordinated self-alignment preference, to guarantee that the box lines up the relevant edge with other boxes in its baseline-sharing group. That is, the box’s start (end) margin edge must be intended to align—and actually align—to the corresponding edge of its containing block when its baseline alignment preference is “first” (“last”). It otherwise takes its fallback alignment.

追加的な詳細は、 `§ 基底線による~boxたちの整列-法$を見よ。 `基底線による内容-整列$は、 ~boxの内在的~sizeを増やすこともある。 ◎ See § 9.3 Aligning Boxes by Baseline for additional details. Baseline content-alignment can increase the intrinsic size of the box.

6.1. 行内-軸／主-軸 沿いの自己-整列： `justify-self^p ~prop

~box（`整列~subject$）を その包含塊（`整列~容器$）の中で `整列~容器$の［ `行内-軸$／~row軸／`主-軸$ ］沿いに，両端揃えにする — すなわち，~boxの`外縁~辺$は、 `整列~容器$の中で，`§ 整列~keyword$にて述べたように整列される。 各種~値の意味は： ◎ Justifies the box (as the alignment subject) within its containing block (as the alignment container) along the inline/row/main axis of the alignment container: the box’s outer edges are aligned within its alignment container as described by its alignment value. Values have the following meanings:

`auto@v

次に該当するときは、 `~normalJS$v と同じに挙動する ⇒＃ ~boxには親がない ／ `絶対的に位置され$た~boxの実際の位置を決定するとき ◎ Behaves as normal if the box has no parent, or when determining the actual position of an absolutely positioned box.＼

他の場合 （`絶対的に位置され$た~boxの`静的~位置$を決定するときも含む）、 親~boxの `justify-items$p の算出d値 （から `legacy$v ~keywordを（もし在れば）除いたもの） と同じに挙動する。 ◎ It behaves as the computed justify-items value of the parent box (minus any legacy keywords) otherwise (including when determining the static position of an absolutely positioned box).

`~normalJS@v

当の~layout~mode用の “既定の” 整列を表現する — その挙動は、 以下の各節に述べるように，~layout~modeに依存する。 ◎ Represents the “default” alignment for the layout mode. Its behavior depends on the layout mode, as described below.

`~stretchJS@v

対象の軸に応じて：

横方向の場合

［ ~boxの `width$p の`算出d値$は `~autoS$v ］かつ［ ~boxの `margin-left$p, `margin-right$p とも非 `auto^v ］ならば、 ~boxの使用~sizeを，次のように設定する ⇒ `min-width$p, `max-width$p により課される拘束は守りつつ、 ~boxの外縁~size（横幅）が，`整列~容器$を埋めるために必要yな長さにアリな限り近くなるようにする

縦方向の場合

［ `height$p, `margin-top$p, `margin-bottom$p, `min-height$p, `max-height$p, 縦幅 ］に関して，横方向の場合と同様とする。

◎ When the box’s computed width/height (as appropriate to the axis) is auto and neither of its margins (in the appropriate axis) are auto, sets the box’s used size to the length necessary to make its outer size as close to filling the alignment container as possible while still respecting the constraints imposed by min-height/min-width/max-height/max-width.

この値~用の既定の`~fallback整列$は、 一般には `flex-start$v とするが，`基底線~整列~選好$として［ `最初の基底線~集合$／`最後の基底線~集合$ ］も~boxに指定された場合は［ `self-start$v ／ `self-end$v ］とする。 ◎ Unless otherwise specified, this value falls back to flex-start generally, and to self-start or self-end if the box has also specified first baseline or last baseline baseline content-alignment (respectively) in the same axis.

注記： `~stretchJS$v ~keywordは、 要素を その容器に収まるように縮短させる。 ◎ Note: The stretch keyword can cause elements to shrink, to fit their container.

`baseline-position$t

`基底線による自己-整列$を指示する — 次に挙げる各節に定義されるように ⇒＃ `§ 基底線の整列~値＠#baseline-values$, `§ 基底線による自己-整列＠#baseline-align-self$, `§ 基底線~整列の詳細＠#baseline-rules$ ◎ Indicates baseline self-alignment, as defined in § 4.2 Baseline Alignment: the baseline keyword and first/last modifiers, § 6.4 Baseline Self-Alignment, and § 9 Baseline Alignment Details.

`overflow-position$t? `self-position$t

`§ 整列~keyword$にて定義される。 ◎ Defined in § 4 Alignment Keywords, above.

`~stretchJS$v 以外の値は、［ `width$p ／ `height$p ］用の値 `~autoS$v が `fit-content$v として扱われるようにする。 ◎ Values other than stretch cause a width/height of auto to be treated as fit-content.

注記： ~marginに対する `auto^v は、 実質的に~margin区画の~sizeを調整するので， `justify-self$p より優先される。 ◎ Note: auto margins, because they effectively adjust the size of the margin area, take precedence over justify-self.

6.2. 塊-軸／交叉-軸 沿いの自己-整列： `align-self^p ~prop

~box（`整列~subject$）を その包含塊（`整列~容器$）の中で `整列~容器$の［ `塊-軸$／~col軸／`交叉-軸$ ］沿いに整列する： `§ 整列~keyword$に述べたように、 ~boxの`外縁~辺$が，その`整列~容器$の中で整列される。 各種~値の意味は： ◎ Aligns the box (as the alignment subject) within its containing block (as the alignment container) along the block/column/cross axis of the alignment container: the box’s outer edges are aligned within its alignment container as described by its alignment value. Values have the following meanings:

`auto@v

次に該当するときは、 `~normalAS$v と同じに挙動する ⇒＃ ~boxには親がない ／ `絶対的に位置され$た~boxの実際の位置を決定するとき ◎ Behaves as normal if the box has no parent, or when determining the actual position of an absolutely positioned box.＼

他の場合 （`絶対的に位置され$た~boxの`静的~位置$を決定するときも含む）、 親~boxの `align-items$p の算出d値 （から `legacy$v ~keywordを（もし在れば）除いたもの） と同じに挙動する。 ◎ It behaves as the computed align-items value of the parent box (minus any legacy keywords) otherwise (including when determining the static position of an absolutely positioned box).

`~normalAS@v

当の~layout~mode用の “既定の” 整列を表現する — その挙動は、 以下の各節に定義される。 ◎ Represents the “default” alignment for the layout mode, as defined below.

`~stretchAS@v

`justify-self$p （ `§ 行内-軸／主-軸 沿いの自己-整列＠#justify-self-property$ ） に対するときと同じに定義される。 ◎ As defined for justify-self in § 6.1 Inline-Axis (or Main-Axis) Self-Alignment: the justify-self property.

`baseline-position$t

`基底線による自己-整列$を指示する — 次に挙げる各節に定義されるように ⇒＃ `§ 基底線の整列~値＠#baseline-values$, `§ 基底線による自己-整列＠#baseline-align-self$, `§ 基底線~整列の詳細＠#baseline-rules$ ◎ Indicates baseline self-alignment, as defined in § 4.2 Baseline Alignment: the baseline keyword and first/last modifiers, § 6.4 Baseline Self-Alignment, and § 9 Baseline Alignment Details.

`overflow-position$t? `self-position$t

`§ 整列~keyword$にて定義される。 ◎ Defined in § 4 Alignment Keywords, above.

注記： ~marginに対する `auto^v は、 実質的に~margin区画の~sizeを調整するので， `align-self$p より優先される。 ◎ Note: auto margins, because they effectively adjust the size of the margin area, take precedence over align-self.

6.3. 自己-整列： `place-self^p 略式~prop

この`略式~prop$は、 `align-self$p, `justify-self$p 両~propを単独の宣言で設定する。 値が 1 個だけ与えられた場合は，その値が両~propにアテガわれ、 2 個~与えられた場合は， 2 個目の値が後者の~propにアテガわれる。 ◎ This shorthand property sets both the align-self and justify-self properties in a single declaration. The first value is assigned to align-self. The second value is assigned to justify-self; if omitted, it is copied from the first value.

6.4. 基底線による自己-整列

~rowを連ねる様な~layout文脈に関与している（同じ`整列~文脈$を共有する）~boxどうしは、 互いの基底線を整列できる。 `基底線による自己-整列@ は、 同じ`基底線-共有~group$に属する各~boxの内容の`整列~基底線$を互いに整列するため， 実質的に それらの~boxの`~margin$を増やす。 ◎ Boxes participating in row-like layout contexts (shared alignment contexts) can be baseline-aligned to each other. Baseline self-alignment effectively increases the margins on the box to align its alignment baseline with that of other baseline-aligned boxes in its baseline-sharing group.

［ 最初／最後 ］の`基底線による自己-整列$に関与する~boxたちが成す集合は、 ~layout~modelに依存する（以下， “／” は同順）： ◎ The set of boxes that participate in baseline self-alignment depends on the layout model:

• `~flex~layout$の場合、 ~AND↓ を満たす`~flex駒$たち：

  • 互いに同じ`~flex行l$内にある
  • `align-self$p ~propの算出d値は［ `first baseline$v ／ `last baseline$v ］

  詳細は `CSS-FLEXBOX-1$r を見よ。

  ◎ Flex Items: • A flex item participates in first/last baseline self-alignment in its flex line if its computed align-self is first baseline/last baseline. See [CSS-FLEXBOX-1] for details.

• `格子~layout$の場合：

  • ~AND↓ を満たす`格子~駒$たち：

    • ~spanする最も［ 始端／終端 ］側の`格子~row$は、 互いに同じである
    • `align-self$p ~propの算出d値は［ `first baseline$v ／ `last baseline$v ］

  • ~AND↓ を満たす`格子~駒$たち：

    • ~spanする最も［ 始端／終端 ］側の`格子~col$は、 互いに同じである
    • `justify-self$p ~propの算出d値は［ `first baseline$v ／ `last baseline$v ］
  ◎ Grid Items: • A grid item participates in first/last baseline self-alignment in its startmost/endmost row or column if its align-self or justify-self property (respectively) computes to first baseline/last baseline.

正確な詳細は、 `§ 基底線による~boxたちの整列-法$を見よ。 `基底線による自己-整列$は、 ~boxが供与する内在的~sizeを増やすこともある。 ◎ See § 9.3 Aligning Boxes by Baseline for exact details. Baseline self-alignment can increase the intrinsic size contribution of the box.

6.5. 絶対的に位置され, 静的~位置が~insetされた~boxに対する~sizingの効果

`絶対的に位置され$た~boxは、 `行内-軸$~offsetが両側とも `auto^v にされた下では，`行内~size$を計算するための`可用な空間$も整列により影響される。 ◎ For absolutely-positioned boxes whose inline-axis offsets are both auto, the available space for calculating the inline size is also affected by alignment.

注記： `CSS2$r においては、 `可用な空間$は`静的~位置~用の包含塊$の `direction$p ~propで~~制御される （次の段落に挙げる各~節を見よ）。 これらの規則は、 基礎的に，`~inset~prop$に指定された`~auto1$v ~inset【内方への~offset】 のうち一方 （既定では、 始端~辺の~inset） を`静的~位置~矩形$の対応する辺に設定し， 他方を`包含塊$の対応する辺に設定する （すなわち~insetを 0 にする）。 `自己-整列~prop$は、 配置~用に~~参照する`包含塊$の `direction$p を置換すると同時に， この~sizeを得るために~~参照する~insetも置換する。 ◎ Note: In [CSS2], the available space is keyed off of the direction property of the static-position containing block. (See CSS2§10.3.7 and CSS2§10.3.8.) Fundamentally these rules set one of the auto insets (by default, the start-edge inset) to the corresponding edge of the static-position rectangle and the other to the corresponding edge of the containing block (i.e. set the inset to zero). Just as the self-alignment properties replace the containing block’s direction lookup for placement, they also replace this lookup for sizing, as specified here.

したがって， `CSS2$r ［ `§ 絶対的に位置された置換されない要素の横幅$, `§ 絶対的に位置された置換される要素の横幅$ ］の規則を解釈するとき，［ 要素の`静的~位置~用の包含塊$の `direction$p ~prop ］が参照される所では、 代わりに，［［ `align-self$p, `justify-self$p ］~propのうち，関連な軸に適用されるものと定義される方 ］の値を参照する — ［ `left$v に等価な整列は `ltr$v 用に定義されたそれ／ `right$v に等価な整列は `rtl$v 用に定義されたそれ ］として扱う下で。 `~normalJC$v は `start$v として, `分布型の整列$を与える値は`~fallback整列$として扱うとする。 ◎ Thus, when interpreting the rules in CSS2§10.3.7 and CSS2§10.3.8, wherever the direction property of the static-position containing block is referenced, instead reference the value of the align-self or justify-self property (whichever is defined to apply to the relevant axis), treating left-equivalent alignment as defined for ltr and right-equivalent alignment as defined for rtl. Treat normal as start and any distributed alignment value as its fallback alignment.

`center$v 整列の事例では，~boxに`可用な空間$は、 関連な軸において［ `静的~位置~矩形$の中央から`包含塊$の最も近い辺までの距離 ］の 2 倍になる。 ◎ In the case of center alignment, the available space for the box is double the distance between the center of the static-position rectangle and the closest edge of the containing block in the relevant axis.

注記： ［ `align-self$p ／ `justify-self$p ］~propも、 ~sizingにおける追加的な側面を改変する。 例えば， `justify-self^p に対する `stretch^v は、 `内容が収まる~sizing$（ “収まるよう縮短する~sizing” ）を`可用な空間$に`伸張して収まる~sizing$に置換することになる（可用な空間すべてが消費される）。 これは、 ここでの可用な空間に対する調整とは独立な効果になる。 ◎ Note: The align-self/justify-self properties can also modify additional aspects of sizing: for example, justify-self: stretch will replace “shrink-to-fit” (fit-content) sizing into the available space with stretch-fit sizing (consuming all of the available space). This is an independent effect from the available space adjustment here.

注記： これが影響するのは、［ `絶対的に位置され$た~boxを~sizeするために`可用な空間$をどう計算するか ］に限られる — その整列は、 前節に指定したとおりになる。 ◎ Note: This only affect how available space is calculated for sizing the absolutely-positioned box; its alignment is as specified in previous sections.

7.1. 行内-軸／主-軸 沿いの既定の整列： `justify-items^p ~prop

この~propは、 この~boxの整形~文脈に関与している すべての子~box（匿名~boxも含む）用の，既定の `justify-self$p を指定する。 各種~値の意味は： ◎ This property specifies the default justify-self for all of the child boxes (including anonymous boxes) participating in this box’s formatting context. Values have the following meanings:

`legacy@v

この~keywordは、 実質的に，値を子孫の中へ継承させる。 ◎ This keyword causes the value to effectively inherit into descendants.

この~keywordが［ `left$v ／ `right$v ／ `center$v ］~keywordを伴わずに現れた場合、 算出d値は，［ `justify-items$p の`継承d値$が `legacy$v ~keywordを含むならば 継承d値 ／ 他の場合は `normal^v ］になる。 ◎ If the legacy keyword appears on its own (without an accompanying left, right, or center keyword): if the inherited value of justify-items includes the legacy keyword, this value computes to the inherited value; otherwise it computes to normal.

他の場合、 `justify-self$p: `auto^v にされた子は，［ `justify-items$p の値から `legacy$v ~keywordを除いた，整列~keyword ］のみを参照する。 これは、［ ~HTMLの［ `center^e 要素／ `align^a 属性 ］による，旧来の整列の挙動 ］を実装するために存在する。 ◎ When justify-self:auto references the value of justify-items, only the alignment keyword, not the legacy keyword, is referenced by it. It exists to implement the legacy alignment behavior of HTML’s <center> element and align attribute.

他の値は、 特別に取扱われることなく，そのまま `justify-self$p から参照される。 ◎ Other values have no special handling and are merely referenced by justify-self.

7.2. 塊-軸／交叉-軸 沿いの既定の整列： `align-items^p ~prop

この~propは、 この~boxの整形~文脈に関与している すべての子~box（匿名~boxも含む）用の，既定の `align-self$p を指定する。 ◎ This property specifies the default align-self for all of the child boxes (including anonymous boxes) participating in this box’s formatting context.

この~propの値は、 特別に取扱われることなく，そのまま `align-self$p から参照される。 ◎ Values have no special handling and are merely referenced by align-self.

7.3. 既定の整列： `place-items^p 略式~prop

この`略式~prop$は、 `align-items$p, `justify-items$p 両~propを単独の宣言で設定する。 値が 1 個だけ与えられた場合は，その値が両~propにアテガわれ、 2 個~与えられた場合は， 2 個目の値が後者の~propにアテガわれる。 ◎ This shorthand property sets both the align-items and justify-items properties in a single declaration. The first value is assigned to align-items. The second value is assigned to justify-items; if omitted, it is copied from the first value.

8.1. ~row／~colの側溝：`row-gap^p ／ `column-gap^p ~prop

これらの~propは、 `側溝@ （ `gutter^en ） — 容器~内の駒どうしの合間に追加される空間 — の~sizeを指定する。 `側溝$は、 `内容-分布~prop$の `space-between$v ~keywordに類似な方式で — ただし、 残りの空間に対する割合分ではなく，固定d~長さとして — 追加される。 `column-gap$p ~propは、 “~col” どうしの合間におけるアキ — 容器の`行内-軸$において各~boxを（`行内-軸$ ~marginと類似に）分離するアキ — を指定する。 `row-gap$p ~propは、 “~row” どうしの合間におけるアキ — 容器の`塊-軸$において各~boxを分離するアキ — を指定する。 ◎ These properties specify fixed-length gutters between items in the container, adding space between them—in a manner similar to the space-between keyword of the content-distribution properties, but of a fixed size instead of as a fraction of remaining space. The column-gap property specifies spacing between “columns”, separating boxes in the container’s inline axis similar to inline-axis margin; while row-gap indicates spacing between “rows”, separating boxes in the container’s block axis.

各種 値の意味は： ◎ Values have the following meanings:

`length-percentage [0,∞]$t

［ “~row” どうし／ “~col” どうし ］の合間における~gapを指定する。 どちらに適用されるかは、 ~layout~modeにより定義される — 詳細は以下【！subsections】を見よ。 ◎ Specifies a gap between “rows” or “columns”, as defined by the layout modes to which it applies; see subsections below for details.

負な値は無効。 ◎ Negative values are invalid.＼

百分率については、 § `gap^p ~propにおける百分率を見よ。 ◎ For percentages, see § 8.3 Percentages In gap Properties.

`normal@v

`複-~col容器$においては、 使用~値 `1em^v を表現する。 ◎ The normal represents a used value of 1em on multi-column containers,＼

他の文脈においては、 使用~値 `0px^v を表現する。 ◎ and a used value of 0px in all other contexts.

側溝による効果は、 駒どうしの合間における最小なアキである — ［ `justify-content$p ／ `align-content$p ］によるアキも追加され得る。 そのような追加的な空間は、 実質的に，`側溝$の~sizeを増やす。 ◎ Gutters effect a minimum spacing between items: additional spacing may be added by justify-content/align-content. Such additional space effectively increases the size of these gutters.

これらの~propの正確な取扱いは、 それらが適用される~layout容器に応じて変わる： ◎ The exact handling of these properties varies by layout container:

`複-~col容器$ ◎ multi-column containers

`column-gap$p は、 隣接な`~col~box$どうしの合間における`側溝$を指定する — `CSS-MULTICOL-1$r を見よ。 ◎ column-gap specifies the gutter between adjacent column boxes, see [CSS-MULTICOL-1].＼

`row-gap$p は、 `column-height$p により確立される`複-~col行l$【！`~col~box$たちが成す~row】どうしの合間における`側溝$を指定する — `CSS-MULTICOL-2$r を見よ。 ◎ row-gap specifies the gutter between the rows of column boxes established by column-height, see [CSS-MULTICOL-2].

`~flex容器$ ◎ flex containers

`主-軸$に適用されるときは （例： ［ `flex-direction$p が `row$v にされた`~flex容器$ ］における `column-gap$p ）、 駒どうしの合間における`側溝$を指示する （同じ~flex行lにおいて［ 隣接な`~flex駒$どうしの合間に固定d~sizeな~marginが追加的に挿入される ］かのように）。 ◎ When applied to the main axis (e.g. column-gap in a row flex container), indicates the gutter between items (as if an additional fixed-size margin were inserted between adjacent flex items in a single line).

`交叉-軸$に適用されるときは （例： ［ `flex-direction$p が `row$v にされた`~flex容器$ ］における `row-gap$p ）、 隣接な`~flex行l$どうしの合間における`側溝$を指示する。 ◎ When applied to the cross axis (e.g. row-gap in a row flex container), indicates the gutter between adjacent flex lines.

`格子~容器$ ◎ grid containers

［ `row-gap$p ／ `column-gap$p ］~propは、［ `格子~row$どうし／`格子~col$どうし ］の合間における`側溝$を定義する。 精確な詳細は、 `CSS-GRID-1$r `§ 各種 側溝~prop＠~CSSGRID#gutters$を見よ。 ◎ The row-gap and column-gap properties, when specified on a grid container, define the gutters between grid rows and grid columns, respectively. See CSS Grid Layout 1 § 10.1 Gutters: the row-gap, column-gap, and gap properties for precise details.

どの事例においても、 `側溝$は，ある`断片化~分断$に一致する所では消去る。 `CSS-BREAK-3$r ◎ In all cases, the gutter disappears when it coincides with a fragmentation break. [CSS-BREAK-3]

注記： ~table~boxにおいては、 `gap$p ~propを利用しても，各~cell間の分離を指定することはない。 代わりに `border-spacing$p ~propを利用する： その機能性は少し異なり、 継承されることに加え，最も外側の~cellと~tableの~borderとの合間にも追加的なアキを指定する （ `space-between$v よりも `space-evenly$v に類似する）。 ◎ Note: Table boxes do not use the gap properties to specify separation between their cells. Instead, they use the border-spacing property, which has slightly different functionality: it inherits, and it also specifies the additional spacing between the outermost cells and the border of the table (similar to space-evenly rather than space-between).

8.2. ~gap略式~prop： `gap^p

この~propは、［ `row-gap$p, `column-gap$p ］を 1 個の宣言で設定する`略式~prop$である。 `column-gap$tp が省略された場合、 `row-gap$tp と同じ値が設定される。 ◎ This property is a shorthand that sets row-gap and column-gap in one declaration. If <'column-gap'> is omitted, it’s set to the same value as <'row-gap'>.

8.3. `gap^p ~propにおける百分率

一般に，`gap$p ~propにより導入される~gapは、 ~gapの~sizeを伴う空な［ 駒／筋／等々 ］の様に動作するものと意図される。 言い換えれば、 作者は，容器の中に空な［ 駒／筋／等々 ］を追加的に挿入するだけで `gap^p の効果を再現-可能になるはずである。 ◎ In general, gaps introduced by the gap properties are intended to act like an empty item/track/etc with the gap’s size; in other words, an author should be able to reproduce the effects of gap by just inserting additional empty items/tracks/etc into the container.

`gap$p における百分率は、 常に，要素の`内容~box$の対応する【軸における】~sizeを~~基準に解決される。 この~sizeが確定的であるときの挙動は、 きちんと定義され，各種~layout~modeで一貫する。 一方で［ 駒／筋／等々 ］に対する`循環な百分率~size$の扱いは、 ~layout~modeごとに異なり， `gap^p にも該当する： ◎ gap always resolves percentages against the corresponding size of the content box of the element. When this size is definite, the behavior is well-defined and consistent across layout modes. But since different layout modes treat cyclic percentage sizes for items/tracks/etc differently, gap does as well:

`格子~layout$においては： ◎ In Grid Layout

`循環な百分率~size$は、 `CSS-SIZING-3$r `§ 百分率による~sizing＠~SIZING#percentage-sizing$における［ `最小~size~prop$／ ~marginや~padding ］のときと同じく ⇒＃ `内在的~size供与$を決定するときには 0 を~~基準に解決される／ ~boxの内容を~lay-outするときには，~boxの`内容~box$を~~基準に解決される ◎ As in the min size properties and margins/paddings [CSS-SIZING-3], cyclic percentage sizes resolve against zero for determining intrinsic size contributions, but resolve against the box’s content box when laying out the box’s contents.

`~flex~layout$においては： ◎ In Flex Layout

`循環な百分率~size$は、 すべての事例で， 0 を~~基準に解決される。 ◎ Cyclic percentage sizes resolve against zero in all cases.

8.4. 旧来の~gap~prop： `grid-row-gap^p, `grid-column-gap^p, `grid-gap^p

`CSS-GRID-1$r には、 元々は，`側溝$用に自前の~propたちがあった — それらが既存の［ `row-gap$p ／ `column-gap$p ］に統一されるまでは。 旧来の内容との互換性を得るため、 これらの~prop［ `grid-row-gap@p ／ `grid-column-gap@p ／ `grid-gap@p ］は，［ `row-gap$p ／ `column-gap$p ／ `gap$p ］用の`旧来の別名n$として扱うことにより~supportするモノトスル。 ◎ The Grid Layout module was originally written with its own set of gutter properties, before all such properties were unified into the existing row-gap/column-gap naming. For compatibility with legacy content, these grid-prefixed names must be supported as follows: • grid-row-gap as a legacy name alias of the row-gap property • grid-column-gap as a legacy name alias of the column-gap property • grid-gap as a legacy name alias of the gap property

9.1. ~boxの基底線~集合の決定-法

各~boxは、［ `最初の基底線~集合@ ／ `最後の基底線~集合@ ］を供与し得る【！has】 — これらは、 当の~boxの中の~textの［ 最初／最後 ］の行lの`基底線~集合$に~~代表として対応し，いずれも各~軸ごとに定義される。 ~boxの `整列~基底線@ は、 ~boxを`整列~文脈$内で整列するために利用される基底線であり，~boxの［ `最初の基底線~集合$／`最後の基底線~集合$ ］から一つが~~選ばれる — それは、 通例的には，他の~boxと共有している`整列~文脈$に結付けられた`支配的な基底線$になる （ `CSS-INLINE-3$r の `alignment-baseline$p, `dominant-baseline$p を見よ）。 ◎ Each box, for a given axis, has potentially a first baseline set (and last baseline set) that nominally corresponds to the baseline set of the first/last line of text within the box. The alignment baseline, which is the baseline used to align the box in its alignment context, is one of the baselines in its baseline set, usually the dominant baseline associated with the shared alignment context. (See the dominant-baseline and alignment-baseline properties in [CSS-INLINE-3].)

所与の軸における，~boxの［ `最初の基底線~集合$／`最後の基底線~集合$ ］は、 ~layout~modelごとに異なり，次に従って決定される： ◎ The first and last baseline sets of a box are determined differently based on the layout model, as follows:

`行l~box$ ◎ line box

［ `最初の基底線~集合$／`最後の基底線~集合$ ］は、 当の行l~boxの［ `支配的な基底線$, `根~行内~box$の~font設定群 ］から`生成-$される。 ◎ The first/last baseline set of a line box is generated from the dominant baseline and the font settings of its root inline box.

`塊~容器$ ◎ block containers

`最初の基底線~集合$は、 当の容器~内に`~flow内$にある［ `行l~box$であるもの／ `塊~level$の子であって, `最初の基底線~集合$を供与するもの ］は：

• 無いならば，無い。
• 在るならば，それらのうち最初に来るものの`最初の基底線~集合$になる。

◎ The first/last baseline set of a block container is taken from＼ the first/last in-flow line box in the block container or＼ the first/last in-flow block-level child in the block container that contributes a set of first/last baselines, whichever comes first/last.＼ If there is no such line box or child, then the block container has no baseline set.

`最後の基底線~集合$は、 上のすべての “最初” を “最後” に読み替える下で，相似的に決定される — ただし，旧来の理由から ⇒ 当の容器が次を満たす場合には，`最後の基底線~集合$は常にあり、 それを成すどの基底線も［ 当の容器の`塊-終端$`~margin辺$ ］に対応する ⇒ ［ `baseline-source$p は `auto＠~CSSINLINE#valdef-baseline-source-auto$v （`初期~値$）をとる ］~AND［［ `塊~level$／`行内~level$ ］の`塊~容器$である ］~AND［ `~scroll容器$である ］ ◎ ↑ ◎ However, for legacy reasons if its baseline-source is auto (the initial value) a block-level or inline-level block container that is a scroll container always has a last baseline set, whose baselines all correspond to its block-end margin edge.

`複-~col容器$ ◎ multi-column containers

`最初の基底線~集合$は、 当の容器~内に［ `~col~box$／`複-~col~spanner$ ］【のうち`最初の基底線~集合$ %S を供与しているもの】であって［ 【 %S 内に】当の容器の`整列~基底線$に対応している基底線 ］を伴うものは：

• 無いならば，無い。
• 在るならば，それらのうち［ そのような基底線が最も`塊-始端$に来るもの ］の`最初の基底線~集合$になる

◎ The first baseline set of a multi-column container is＼ the first baseline set of the column or multi-column spanner with the highest (block-start–most) baseline corresponding to the multi-column container’s alignment baseline.＼ If there is no such line box or child, then the multi-column container has no first baseline set.

`最後の基底線~集合$は、［ `最後の基底線~集合$, 最も`塊-終端$に来るもの ］を利用する下で，相似的に決定される。 ◎ The last baseline set is analogous, but uses the last baseline set and lowest (block-end–most) baseline.

~table ◎ tables

［ `最初の基底線~集合$／`最後の基底線~集合$ ］は、 当の~tableの［ 最初／最後 ］の~rowの［ `最初の基底線~集合$／`最後の基底線~集合$ ］になる。 ◎ The first/last baseline set of a table box is the first/last baseline set of its first/last row.

`行内-塊$の［ `最初の基底線~集合$／`最後の基底線~集合$ ］を見出すときは、 ~table~boxから供与される基底線は，すべて飛ばすモノトスル （これは、 `CSS2$r による旧来の挙動との過去互換のためにある）。 ◎ When finding the first/last baseline set of an inline-block, any baselines contributed by table boxes must be skipped. (This quirk is a legacy behavior from [CSS2].)

~table~row ◎ table rows

［ `最初の基底線~集合$／`最後の基底線~集合$ ］は：

• 当の~row内に`行内-軸$沿いの［ `first baseline$v ／ `last baseline$v ］整列に関与する~cellが在る場合、 それらの整列が遂行された上で，［ それらの~cellが共有する`整列~基底線$, 当の~rowにて`可用な最初の~font$ ］から`生成-$される。
• 他の場合、 当の~row内の各~cellの`内容~辺$のうち［ 最も低いもの, 最も高いもの ］から`合成-$される。 `CSS2$r

◎ If any cells in the row participate in first baseline/last baseline alignment along the inline axis, the first/last baseline set of the row is generated from their shared alignment baseline and the row’s first available font, after alignment has been performed. Otherwise, the first/last baseline set of the row is synthesized from the lowest and highest content edges of the cells in the row. [CSS2]

複数の~rowに~spanする~cellは、［ `first$v ／ `last$v ］の目的においては， それらのうち［ 最初／最後 ］の~rowにしか関与しない。 ◎ Spanning cells participate only in the first/last row that they span for the purpose of first baseline/last baseline.

`~flex容器$ ◎ flex containers

`CSS-FLEXBOX-1$r `§ ~flex容器の基底線＠~CSSFLEX#flex-baselines$ を見よ。 ◎ See Flex Baselines in [CSS-FLEXBOX-1].

`格子~容器$ ◎ grid containers

`CSS-GRID-1$r `§ 格子~容器の基底線＠~CSSGRID#grid-baselines$ を見よ。 ◎ See Grid Baselines in [CSS-GRID-1].

所与の単独の基底線 %基底線 から~box用の `基底線たちを生成する@ ときは、［ ~font設定群からの基底線~table, 当の~boxにて`可用な最初の~font$ ］を利用して基底線~集合を得た上で， 結果の基底線~集合と %基底線 を整列する【？】。 ◎ To generate baselines for a box from a single baseline, use the baseline table from the font settings and first available font of that box, and align that baseline set to the given single baseline.

`基底線~整列$に関与している~boxが`基底線~集合$を供与しない【！has no】場合、 ~boxの`整列~基底線$は，［ ~boxが関与している`整形~文脈$の規則 ］に則って`合成-$される。 所与の［ 矩形 ／ 2 本の平行~線 ］から `基底線を合成する@ ときは、 `行-下面$を成す線から `alphabetic$bL 基底線を合成して，［ 矩形の対~辺 ／ 2 本の平行~線 ］の位置の平均から `central^v 基底線を合成する。 追加的な基底線を合成するための規則は、 `CSS-INLINE-3$r `§ 整列~計量の合成-法＠~CSSINLINE#baseline-synthesis$ を見よ。 ◎ If a box that participates in baseline alignment has no baseline set, then its alignment baseline is synthesized according to the rules of the formatting context in which it participates. To synthesize baselines from a rectangle (or two parallel lines), synthesize the alphabetic baseline from the line-under line, and the central baseline by averaging the positions of the two edges or lines. See CSS Inline Layout 3 § A: Synthesizing Alignment Metrics for rules on synthesizing additional baselines.

合成~用に［ `行-下面$, `行-上面$ ］辺を決定するときには、 一般に，［ ~boxや図形，その他の整列される~obj ］【すなわち，`整列~subject$】の`書字~mode$が利用される。 しかしながら，［ この`書字~mode$の`塊~flow方向$が`整列~文脈$の軸に平行である ］ときは、［ `整列~文脈$を確立している~box %B ］から［ 次に従って決定される，軸に互換な方の`書字~mode$ ］と`見做す$モノトスル： ◎ In general, the writing mode of the box, shape, or other object being aligned is used to determine the line-under and line-over edges for synthesis. However, when that writing mode’s block flow direction is parallel to the axis of the alignment context, an axis-compatible writing mode must be assumed:

• %B の`塊~flow方向$は`整列~文脈$の軸に直交な場合 ⇒ %B の`書字~mode$を利用する。 ◎ If the box establishing the alignment context has a block flow direction that is orthogonal to the axis of the alignment context, use its writing mode.

• 他の場合、 %B の自前の`書字~mode$に応じて： ◎ Otherwise:

  • 縦書きならば， `horizontal-tb$v と見做す。 ◎ If the box’s own writing mode is vertical, assume horizontal-tb.
  • 横書きならば， 【 %B の】 `direction$p に応じて ⇒＃ `ltr$v ならば `vertical-lr$v と見做す／ `rtl$v ならば `vertical-rl$v と見做す ◎ If the box’s own writing mode is horizontal, assume vertical-lr if direction is ltr and vertical-rl if direction is rtl.

所与の~box %~box の基底線を見出す目的においては： ◎ For the purposes of finding the baselines of a box,＼

• %~box および［ %~box の子孫のうち【 %~box が関与している`整形~文脈$の】`~flow内$にあるもの ］のうち，`~scroll容器$であるものは、 その`初期~scroll位置$に~scrollされていたかのように見なすモノトスル。 ◎ it and all its in-flow descendants with a scrolling mechanism (see the overflow property) must be considered as if scrolled to their initial scroll position.＼
• 加えて，`~scroll容器$の［ 最初／最後 ］の基底線の位置が %~box の`~border辺$の外側に来る場合， 基底線の位置を~border辺まで寄せるとする。 ◎ Additionally, if the position of a scroll container’s first/last baseline is outside its border edge, that baseline’s position is clamped to the border edge.

9.2. 基底線~整列の~group分け

基底線~整列に一緒に関与する~boxたちは、 `基底線-共有~group@ （ “基底線を共有している~group” ）を成すものとされる。 ~boxたちは、 ~AND↓ を満たす場合に限り，そのような~groupを成し得る： ◎ A baseline-sharing group is composed of boxes that participate in baseline alignment together. This is possible only if they both:

• それらは、 基底線が整列される軸に垂直な軸~沿いに，同じ`整列~文脈$を共有する。 （例えば， `align-self$p が `baseline^v にされた格子~駒は、 格子の塊-軸~沿いに基底線を整列するので，同じ~row内にある他の駒とともに関与する。） ◎ Share an alignment context along an axis perpendicular to the axis they’re being baseline-aligned in. (For example, grid items with align-self: baseline are baseline-aligning along the grid’s block axis, and therefore participate with other items in their row.)
• それらの`基底線~整列~選好$は`互換$である （すなわち，整列させたい基底線は、 それらが共有する整列~文脈の同じ側にある）。 ◎ Have compatible baseline alignment preferences (i.e., the baselines that want to align are on the same side of the alignment context).

注記： ［ `基底線による内容-整列$に関与している~boxたち／ `基底線による自己-整列$に関与している~boxたち ］は、 同じ`基底線-共有~group$の一部を成し得る — したがって，互いに整列され得る。 この 2 つの相違は、［ 整列を遂行するために~~追加する空間 ］を［ ~boxの自前の~border ］の［ 内側, 外側 ］（同順）どちらに挿入するかにある。 ◎ Note: Boxes participating in baseline content-alignment and boxes participating in baseline self-alignment can be part of the same baseline-sharing group, and can thus align to each other. The difference between the two methods is in where extra space is inserted to perform the alignment (inside or outside the box’s own border).

次のいずれかに該当する~boxたちは、 特定0の軸~沿いに，特定0の~boxにより確立される `整列~文脈@ を共有する： ◎ Boxes share an alignment context, along a particular axis, and established by a particular box, when they are:

注記： 概念的には、 同じ`行l~box$内にある`行内~levelの~box$たちも，自己-整列~文脈を共有し, 基底線-共有~groupに関与するが、 それらの基底線~整列に関わるものは `vertical-align$p に限られ， この~moduleに定義される~propは関わらない。 `CSS-INLINE-3$r を見よ。 ◎ Note: Conceptually, the inline-level boxes in a line box also share a self-alignment context and participate in a baseline-sharing group; however they only baseline-align in response to the vertical-align property, not any of the properties defined in this module. See [CSS-INLINE-3].

~boxが複数個の`整列~文脈$に~spanする場合、 ~boxが関与する整列~文脈は，［ それらのうち，当の軸~沿いの最も［ 始端／終端 ］側にあるもの ］に限られる。 例えば， 3 本の~rowに~spanしている~table~cellは、［ それが~spanする最も［ 始端／終端 ］側にある~row ］内にある~table~cellたちの［ `最初の基底線による整列$／`最後の基底線による整列$ ］に関与する。 ◎ If a box spans multiple shared alignment contexts, then it participates in first/last baseline alignment within its start-most/end-most shared alignment context along that axis. For example, a table cell spanning three rows participates in first-baseline alignment with the table cells in the first row that it spans, or alternatively in last-baseline alignment with the table cells in the last row that it spans.

【 これは、 `基底線-共有~group$の定義を精緻化する。 ~boxは、 該当する整列~文脈を成す`基底線-共有~group$のみに属し， 他の~groupには属さないことになるので。 】

2 つの~boxの`基底線~整列~選好$が `互換@ であるとは、 互いの［ `塊~flow方向$, `基底線~整列~選好$ ］が［ 両方とも同じ ］か［ 両方とも反対 ］であることをいう。 【！ “in a baseline-sharing group” を訳出すると循環定義になる 】 ◎ The baseline alignment preferences of two boxes in a baseline-sharing group are compatible if they have: ◎ • the same block flow direction and same baseline alignment preference ◎ • opposite block flow direction and opposite baseline alignment preference

9.3. 基底線による~boxたちの整列-法

同じ`基底線-共有~group$ %~group に所属する［ `整列~subject$たち, それらの基底線~集合 ］が与えられた下で、 `整列~subject$どうしは，次に従って基底線が整列される： ◎ Given a set of alignment subjects and their baselines that all belong to a single baseline-sharing group, the alignment subjects are baseline-aligned as follows:

1. %~group の`整列~文脈$にて`可用な最初の~font$から %~group の基底線~tableを生成する。 加えて、 この~tableとその鏡像とを，互いの `central^v 基底線が整列するように重層する。 これらが，`整列~subject$たちが整列されることになる基底線 “格子” を成す。 ◎ Generate the baseline-sharing group’s baseline table from the first available font of the group’s alignment context and overlay also the mirror of this baseline table by aligning their central baselines. These are the baseline “grids” to which the alignment subjects will align.

2. 各 `整列~subject$に対し，`整列~subject$に指定された`整列~基底線$と［ %~group の［ 基底線~tableまたは その鏡像（`整列~subject$の`行l方位$に合致する方） ］］【の中の同種の基底線】とを整列する†。 `整列~subject$の`整列~基底線$は、 他から指定されない限り （例： `alignment-baseline$p ~propを介して）， 整列~文脈の`支配的な基底線$†【と同種の基底線】とする。

   【† 例えば、 ~boxに指定された整列~基底線が `alphabetic$bL ならば、 ~boxは，基底線~tableの中の `alphabetic$bL 基底線と整列される。 支配的な基底線は、 `dominant-baseline$p で明示的に指定することもできる。 】

   ◎ Align each alignment subject by its specified alignment baseline to the group’s baseline table or its mirror, whichever matches the alignment subject’s line orientation. Unless otherwise specified (e.g. via the alignment-baseline property), the alignment baseline is the dominant baseline of the alignment context.

3. %~group の`~fallback整列$に則って， %~group を`整列~容器$の中で位置する。 %~group の`~fallback整列$は、 %~group を成す`整列~subject$【！item】たち†の`物理-方向$に解決された`~fallback整列$になるとする。

   【† `基底線-共有~group$の定義により，これらの整列~subjectどうしは`互換$なので、 どれも同じ物理-方向に解決される。 】

   ◎ Position the aligned baseline-sharing group within the alignment container according to its fallback alignment. The fallback alignment of a baseline-sharing group is the fallback alignment of its items as resolved to physical directions.
4. ［ 最初／最後 ］の`基底線による内容-整列$に対しては、 `整列~容器$の［ 始端／終端 ］`内容~辺$と`整列~subject$の辺の合間に［ %~group の中での基底線~整列は保守しつつ， %~group の`整列~文脈$内のすべての`整列~容器$の［ 始端／終端 ］~margin辺を互いに整列する ］ために必要yな最小な空間を追加する。 ◎ For first/last baseline content-alignment, then add the minimum necessary extra space between the alignment container’s start/end content edge and the alignment subject’s edge to align the start/end margin edges of all the alignment containers in the alignment context while maintaining baseline alignment within the baseline-sharing group.