1.1. 概観

~flex~layoutは、表面的には塊~layoutに類似する。 それは、［ `float$p や ~col ］などの，塊~layoutに利用できる［ より複雑な，~textや文書を~~主対象にする 多くの~prop ］は欠く一方で、~web~appや複雑な~web頁によく必要とされるような，種々の［ 空間の配分-法や内容の整列-法 ］のための，単純かつ強力な道具を得られる。 ~flex容器の内容は： ◎ Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. The contents of a flex container:

• どの ~flow方向 にも（左方, 右方, 下方, あるいは上方へも！）~lay-outできる ◎ can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
• それらの陳列-順序を~style層にて， 逆順にしたり, 配置替えできる（すなわち，~sourceや発話の順序とは独立に，視覚的~順序を与えられる） ◎ can have their display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
• 単方向の軸（ `主-軸$ ）沿いに一次元的に~lay-outしたり, 第二の軸（ `交叉-軸$ ）沿いに, 複数の~lineに渡るように 折返すことができる。 ◎ can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
• それらの~sizeは`可用な空間$に応じて “~flex” （伸縮可能）になれる。 ◎ can “flex” their sizes to respond to the available space
• それらを，それらの容器に対して, あるいは互いどうしを`交叉-軸$沿いに整列させられる。 【 整列 — この訳の中の語 “~~整列” はすべて， “ソート（ `sort^en ）” ではなく “揃え（ `align^en ）” の方を意味する。】 ◎ can be aligned with respect to their container or each other on the secondary (cross)
• 容器の`交叉size$は保全しつつ、`主-軸$沿いに，動的に 畳んだり（ `collapse^en ）, その逆にできる。 ◎ can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size

#deals {
  `display$p:flex;
      /* 
~flex~layoutにより，一連の駒は 縦幅が等しくされる
◎
Flex layout so items have equal height
 */

  `flex-flow$p:row_wrap;
      /* 
一連の駒を，複数~lineに渡って折返す
◎
Allow items to wrap into multiple lines
 */
}
.sale-item {
  `display$p:flex;
      /* 
各~駒の内容も，~flex~layoutを利用して~lay-outする
◎
Lay out each item using flex layout
 */

  `flex-flow$p:column;
      /* 
駒の内容は縦方向に~lay-outする
◎
Lay out item’s contents vertically
 */
}
.sale-item > img {
  `order$p:-1;
      /* 
画像を（視覚的~順序で）他の内容より前に~~移動する
◎
Shift image before other content (in visual order)
 */

  `align-self$p:center;
      /* 
画像を交叉~~方向（横方向）の中央に据える
◎
Center the image cross-wise (horizontally)
 */
}
.sale-item > button {
  `margin-top$p:auto;
      /* 
上端の`~auto_v~margin$によりボタンは下端へ押しやられる
◎
Auto top margin pushes button to bottom
 */
}

1.2. ~module間の相互作用

この~moduleは、新たな［ `塊level$, `行内level$ ］の`表示~型$を追加し，新たな種類の整形~文脈を その~layoutを制御する~propと伴に定義することにより、 `CSS21$r による `display$p ~propの定義を拡張する。 この~moduleにて定義される どの~propも， `first-line$pe ／ `first-letter$pe 疑似要素には適用されない。 ◎ This module extends the definition of the display property [CSS21], adding a new block-level and new inline-level display type, and defining a new type of formatting context along with properties to control its layout. None of the properties defined in this module apply to the ::first-line or ::first-letter pseudo-elements.

CSS Box Alignment Module は、ここに導入する`整列~prop$（ `justify-content$p, `align-items$p, `align-self$p, `align-content$p ）の定義を拡張して，それらに取って代わる。 ◎ The CSS Box Alignment Module extends and supercedes the definitions of the alignment properties (justify-content, align-items, align-self, align-content) introduced here.

4.1. 絶対位置された子 ~flex

`~flex容器$（以下，この節では単に %容器 と記す）の子のうち，`絶対位置され$たもの（以下，単に %子 と記す）は、`~flow外$にあるので，~flex~layoutに関与することはない。 ◎ As it is out-of-flow, an absolutely-positioned child of a flex container does not participate in flex layout.

%子 の`静的位置$は、［ %子 と %容器 のいずれも，［ それらの使用~sizeによる固定~sizeの~boxである ］と見做す下で、 %子 を［ それが %容器 の中の唯一の`~flex駒$であった ］かのように位置させる ］ことにより，決定される。 この目的においては、~marginに対する `auto^v は， 0 に扱われる。 ◎ The static position of an absolutely-positioned child of a flex container is determined such that the child is positioned as if it were the sole flex item in the flex container, assuming both the child and the flex container were fixed-size boxes of their used size. For this purpose, auto margins are treated as zero.

4.2. ~flex駒の~marginと~padding

隣接する 2 個の`~flex駒$の~marginは`相殺-$されない。 ◎ The margins of adjacent flex items do not collapse.

`~flex駒$ %駒 上の百分率による［ ~margin／~padding ］は、 %駒 の`包含塊$の`行内~size$を基準に解決される — `塊~box$のときと同様に。 例えば，横書き`書字mode$の下では、［ 左端, 右端, 上端, 下端 ］のいずれも，百分率は包含塊の横幅を基準に解決される。 ◎ Percentage margins and paddings on flex items, like those on block boxes, are resolved against the inline size of their containing block, e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal writing modes.

自動~marginは、対応する次元の余った空間を吸収するように拡幅される。 これを利用して、~flex駒に対し，互いを整列させたり, 隣接するものを離れた所へ押出すことができる。 `~auto_v~margin$による整列-法を見よ。 ◎ Auto margins expand to absorb extra space in the corresponding dimension. They can be used for alignment, or to push adjacent flex items apart. See Aligning with auto margins.

4.3. ~flex駒の z ~~方向の順序付け

注記： ~flex駒の子孫は、駒の外側に位置させられても，駒により確立される積層~文脈に関与する。 ◎ Note: Descendants that are positioned outside a flex item still participate in any stacking context established by the flex item.

4.4. 畳まれる駒

~flex駒~上にて `visibility$p:collapse を指定することにより，~flex駒は `畳まれ@ 、［ `table-row^v や `table-column^v 上の `visibility$p:collapse ］と似た効果を生産する： 畳まれた~flex駒は，描画~対象からは まるごと外されるが、~flex~lineの交叉sizeを安定させるため， “支柱（概念的な突っ支い棒）” だけ居残るようにされる。 従って，~flex容器の~flex~lineが一本だけの場合、駒が畳まれるかどうかが動的に~~変化しても，`~flex容器$の`主size$は変化し得るが，`交叉size$には効果を及ぼさず、頁の~layoutの残りの部分を “揺らがす” ことはないことが保証される。 一方で，複数~lineを伴う~flex容器の交叉sizeは、［ ~flex~lineの折返しが，駒を畳んだ後にも 再び行われる† ］ので，変化し得る。 ◎ Specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-size stable. Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to "wobble". Flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.

【 “畳む”（ `collapse^en する） — ~marginの~~相殺（ `collapse^en ）とは ある意味~~似て異なる（一般英語としては同じ概念であろうが）。 】【† すなわち，駒が畳まれることにより、次の~lineに折返された後続の駒が，駒と同じ~lineに繰り上げられる。 】

畳まれた~flex駒は描画されないが， 整形~構造 には現れる。 従って， `display$p:none `CSS21$r にされた駒と異なり、整形~構造の下で~boxの出現に依存する効果（ `counter^en の増加, あるいは~animationや遷移効果【 CSS Animation, CSS Transition 】の実行, 等々）は、依然として，畳まれた駒~上でも演算される。 ◎ Though collapsed flex items aren’t rendered, they do appear in the formatting structure. Therefore, unlike on display:none items [CSS21], effects that depend on a box appearing in the formatting structure (like incrementing counters or running animations and transitions) still operate on collapsed items.

@media (`min-width$d:60em) {
  /* 
（既定の~text~sizeに比して）十分な部屋があるときだけ， 2 本の~colで~layoutする◎
two column layout only when enough room (relative to default text size)
 */
  div { `display$p:flex; }
  #main {
    `flex$p:1;         /* 
残りの空間すべては #main が占める
◎
Main takes up all remaining space
 */
    `order$p:1;        /* 
~navi（ nav ）の後ろ（右側）に配置する
◎
Place it after (to the right of) the navigation
 */
    `min-width$p:12em; /* 
主~内容~区画の~sizingを最適化する
◎
Optimize main content area sizing
 */
  }
}
/* 
`visibility$p:collapse が働くよう，~menu項目には~flex~layoutを利用する
◎
menu items use flex layout so that visibility:collapse will work
 */
nav > ul > li {
  `display$p:flex;
  `flex-flow$p:column;
}
/* 
操作中でない下位~menuは，動的に畳まれる
◎
dynamically collapse submenus when not targetted
 */
nav > ul > li:not(:target):not(:hover) > ul {
  `visibility$p:collapse;
}

</header>
<div>
  <article id="main">
    Interesting Stuff to Read
  </article>
  <nav>
    <ul>
      <li id="nav-about"><a href="#nav-about">About</a>
        …
      <li id="nav-projects"><a href="#nav-projects">Projects</a>
        <ul>
          <li><a href="…">Art</a>
          <li><a href="…">Architecture</a>
          <li><a href="…">Music</a>
        </ul>
      <li id="nav-interact"><a href="#nav-interact">Interact</a>
        …
    </ul>
  </nav>
</div>
<footer>
…

支柱~sizeを算出するためには、最初に，すべての駒は畳まれないものとした下で ~flex~layoutが遂行され，次に畳まれる各~駒が［ 駒の元の~lineの元の交叉sizeを保守するような支柱 ］に置換された上で、~flex~layoutが再実行される。 `visibility$p:collapse が，どのように~flex~layoutに作用するかについての規範的な定義は、`~flex~layout~algo$を見よ。 ◎ To compute the size of the strut, flex layout is first performed with all items uncollapsed, and then re-run with each collapsed item replaced by a strut that maintains the original cross-size of the item’s original line. See the Flex Layout Algorithm for the normative definition of how visibility:collapse interacts with flex layout.

注記： ~flex駒~上における `visibility$p:collapse の利用は、最も高価な手続きである ~flex~layout~algoを，~~部分的に繰り返し再実行させることになる。 作者には、畳まれるかどうかが動的に~~変化しない駒を隠す際には、 `display$p:none を利用し続けることが推奨される。 その方が~layout~engineにとってはより効率的になるので。 （しかしながら， `visibility$p の変化-時には，手続きの必要な部分のみ繰り返されるので、動的な場合には，依然として `visibility$p:collapse が推奨される。） ◎ Note: Using visibility:collapse on any flex items will cause the flex layout algorithm to repeat partway through, re-running the most expensive steps. It’s recommended that authors continue to use display:none to hide items if the items will not be dynamically collapsed and uncollapsed, as that is more efficient for the layout engine. (Since only part of the steps need to be repeated when visibility is changed, however, 'visibility: collapse' is still recommended for dynamic cases.)

4.5. ~flex駒の自動的な最小~size

注記： `自動的~最小~size$を表現する `~autoS$v ~keywordは、［ `min-width$p ／ `min-height$p ］~propの新たな初期値である。 この~keywordは、この仕様にて以前に定義されていたが，今や `CSS-SIZING-3$r ~moduleにて定義される。 ◎ Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties. The keyword was previously defined in this specification, but is now defined in the CSS Sizing module.

`~flex駒$ %駒 用に，より適度な既定の`最小~size$を供するため、`主-軸$における %駒 の`自動的~最小~size$の使用値は，［ %駒 は`~scroll容器$でないならば `内容に基づく最小~size$ ／ ~scroll容器であるならば 通例通り 0 ］になるとする。 ◎ To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.

`指定d~size示唆@

［ %主size ~NEQ ε ］ならば ⇒ `min^op( %主size, %最大-主size ) ◎ If the item’s computed main size property is definite, then the specified size suggestion is that size (clamped by its max main size property if it’s definite).＼

~ELSE_ ε ◎ It is otherwise undefined.

`転換~size示唆@

［ %縦横比 ~NEQ ε ］~AND［ %交叉size ~NEQ ε ］ならば ⇒ `max^op( `min^op( %交叉size, %最大-交叉size ), %最小-交叉size ) ~MUL %縦横比 ◎ If the item has an intrinsic aspect ratio and its computed cross size property is definite, then the transferred size suggestion is that size (clamped by its min and max cross size properties if they are definite), converted through the aspect ratio.＼

~ELSE_ ε ◎ It is otherwise undefined.

`内容~size示唆@

`主-軸$における %駒 の`最小-内容~size$を %s とするとき：

1. %縦横比 ~NEQ ε ならば、 %s を，次で与える値に置換する ⇒ `max^op( `min^op( %s ~DIV %縦横比, %最大-交叉size ), %最小-交叉size ) ~MUL %縦横比
2. 結果の値は、 `min^op( %s, %最大-主size ) で与えられる。

◎ The content size suggestion is the min-content size in the main axis, clamped, if it has an aspect ratio, by any definite min and max cross size properties converted through the aspect ratio, and then further clamped by the max main size property if that is definite.

~boxの内在的~size（例： 要素の`最小-内容~size$）を計算する目的においては、`内容に基づく最小~size$は，当の軸における~boxの~sizeを不定にする（例えば~boxの `width$p ~propが`確定的$な~sizeを指定していても）。 このことは、この~sizeを基準に計算される百分率が`~autoとして挙動する$ことを意味することに注意。 ◎ For the purpose of calculating an intrinsic size of the box (e.g. the box’s min-content size), a content-based minimum size causes the box’s size in that axis to become indefinite (even if e.g. its width property specifies a definite size). Note this means that percentages calculated against this size will behave as auto.

いずれにせよ，これは、一部の事例において百分率を再度~解決するために，追加の~layoutを要することもあるが、この値は，駒の中の百分率~sizeを解決できなくするものではない（ `CSS-SIZING-3$r に定義される値［ `min-content$v, `max-content$v, `fit-content^v ］と同様に）。 ◎ Nonetheless, although this may require an additional layout pass to re-resolve percentages in some cases, this value (like the min-content, max-content, and fit-content values defined in [CSS-SIZING-3]) does not prevent the resolution of percentage sizes within the item.

5.1. ~flexの~flow方向： `flex-direction^p ~prop

`flex-direction$p ~propは、~flex容器の`主-軸$の方向を設定することにより，`~flex駒$が~flex容器の中で どのように配置されるかを指定する。 これは、一連の~flex駒が~lay-outされていく方向を決定する： ◎ The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

`row@v:fd

~flex容器の`主-軸$は、現在の`書字mode$の`行内-軸$と同じ方位になるようにされる。 `主-始端$／`主-終端$ の方向は、現在の`書字mode$の［ `行内-始端$／`行内-終端$ ］方向に等価になる。 ◎ The flex container’s main axis has the same orientation as the inline axis of the current writing mode. The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively, of the current writing mode.

`row-reverse@v:fd

`主-始端$と`主-終端$ の方向が入換わることを除き， `row$v:fd と同じ。 ◎ Same as row, except the main-start and main-end directions are swapped.

`column@v:fd

~flex容器の`主-軸$は、現在の`書字mode$の`塊-軸$と同じ方位になるようにされる。 `主-始端$／`主-終端$ の方向は、現在の`書字mode$の `塊-始端$／`塊-終端$ の方向に等価になる。 ◎ The flex container’s main axis has the same orientation as the block axis of the current writing mode. The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively, of the current writing mode.

`column-reverse@v:fd

`主-始端$と`主-終端$ の方向が入換わることを除き， `column$v:fd と同じ。 ◎ Same as column, except the main-start and main-end directions are swapped.

注記： `row-reverse^v ／ `column-reverse^v 値は、~boxの順序付けを “逆順” にするものではない — `writing-mode$p, `direction$p `CSS3-WRITING-MODES$r と同様に，それらは~flowの方向のみを変化させる。 塗り, 発話, 逐次的~navi の順序は影響されない。 ◎ Note: The reverse values do not reverse box ordering: like writing-mode and direction [CSS3-WRITING-MODES], they only change the direction of flow. Painting order, speech order, and sequential navigation orders are not affected.

5.2. ~flex~lineの折返し： `flex-wrap^p ~prop

`nowrap@v:fw

~flex容器は`単-~line$になる。 ◎ The flex container is single-line.

`交叉-軸$の向きは、 `wrap$v:fw のときと同じになる。 ◎ ↓↓

`wrap@v:fw

~flex容器は`複-~line$になる。 ◎ The flex container is multi-line.

`交叉-軸$の向きは、順方向 — すなわち、`交叉-始端$は［ 現在の`書字mode$の［ `行内-始端$, `塊-始端$ ］のうち`交叉-軸$に属する方 ］になり，`交叉-終端$はその反対側になる。 ◎ ↓↓

`wrap-reverse@v:fw

~flex容器は`複-~line$になる。 ◎ Same as wrap.

`交叉-軸$の向きは、逆方向 — すなわち、［ `交叉-始端$, `交叉-終端$ ］は `wrap$v:fw のときと入換わる。 ◎ For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start. When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

5.3. ~flexの~flow方向と折返し： `flex-flow^p 略式~prop

`flex-flow$p ~propは，［ `flex-direction$p, `flex-wrap$p ］~propを設定するための略式~propであり， ~flex容器の［ 主-軸, 交叉-軸 ］を同時に定義する。 ◎ The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

5.4. 陳列-順序： `order^p ~prop

`~flex駒$は，既定では、それらが~source文書に現れるのと同じ順序で，陳列され, ~lay-outされる。 `order$p ~propを，この順序付けの変更に利用できる。 ◎ Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.

`order$p ~propは、一連の`~flex駒$を序数が付与されたいくつかの~groupに仕分けることを通して，~flex容器の中に~flex駒たちが現れる順序を制御する。 それは、`~flex駒$がどの~groupに属するかを表す序数を指定する，単独の `integer$t を値にとる。 ◎ The order property controls the order in which flex items appear within the flex container, by assigning them to ordinal groups. It takes a single <integer> value, which specifies which ordinal group the flex item belongs to.

~flex容器は，その内容を序数が最低の~groupから順に~lay-outする。 この順序のことを `改変文書順@† と呼ぶ。 同じ序数の~groupに属する一連の駒が~lay-outされる順序は，~source文書に現れる順序に従う。 これは、 塗り順序 `CSS21$r にも，一連の~flex駒が~source文書~内で並替えられていたかのように影響する。 `~flex容器$の子のうち，絶対位置されたものは、~flex駒に相対的な塗り順序を決定する目的においては， `order$p:0 と扱われる。 ◎ A flex container lays out its content in order-modified document order, starting from the lowest numbered ordinal group and going up. Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order [CSS21], exactly as if the flex items were reordered in the source document. Absolutely-positioned children of a flex container are treated as having order: 0 for the purpose of determining their painting order relative to flex items.

【† 原文による呼称は “order-modified document order”（ “`order^p により改変された文書~順序” ）であるが、いかにも長くなるので，ここでは略して和訳している。 】

.tabs {
  `display$p:flex;
}
.tabs > .current {
  `order$p:-1; /* 
既定の値 0 を下回る値
◎
Lower than the default of 0
 */
}

将来~仕様により 特に指定されない限り、この~propの効果は，`~flex駒$でない~boxにはない。 ◎ Unless otherwise specified by a future specification, this property has no effect on boxes that are not flex items.

<!DOCTYPE html>
<header>...</header>
<main>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</main>
<footer>...</footer>

main { `display$p:flex; }
main > article { `order$p:2; `min-width$p:12em; `flex$p:1; }
main > nav     { `order$p:1; `width$p:200px; }
main > aside   { `order$p:3; `width$p:200px; }

@media all and (`max-width$p:600px) {
  /* 
3 本の~colには狭過ぎるときの~support
◎
Too narrow to support three columns
 */
  main { `flex-flow$p:column; }
  main > article, main > nav, main > aside {
  /* 
文書順に戻す
◎
   Return them to document order
 */
    `order$p:0; `width$p:auto;
  }
}

7.1. `flex^p 略式~prop

<‘`flex-grow$p’>

この `number^t 成分は、 `flex-grow$p 下位propを設定して， `~flex伸長-係数@ を指定する。 それは、~flex容器の中で正の自由空間が配分される際に， `~flex駒$が他の一連の`~flex駒$に比して どれだけ伸長することになるのかを決定する。 省略されたときは、 `1^v に設定される。 ◎ This <number> component sets flex-grow longhand and specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed. When omitted, it is set to 1.

0 〜 1 の合間の~flex値には、ある特別な挙動がある： 同じ~line上にある駒たちの~flex値の総和が 1 に満たない場合、それらが占める自由空間は 100% に満たなくなる。 ◎ Flex values between 0 and 1 have a somewhat special behavior: when the sum of the flex values on the line is less than 1, they will take up less than 100% of the free space.

駒の `flex-grow$p 値は、実質的に自由空間の比例分を要請する — 値 `1^v は “自由空間 の 100%” を意味する。 ある~line上の駒たちが要請している自由空間が，合計で 100% を超える場合、互いの比を保ちながら正確に 100% を利用し尽くすように，振り分け直される — 一方で 100% を下回る場合（それぞれが `flex-grow$p:.25 にされた 3 個の駒がある場合など）、各~駒は正確に要請した分だけ取得する（各~駒は自由空間の 25% を取得し，残る 25% は埋められない）。 自由空間がどう配分されるかの正確な詳細は、 ~flex可能な長さの解決-法 を見よ。 ◎ An item’s flex-grow value is effectively a request for some proportion of the free space, with 1 meaning “100% of the free space”; then if the items on the line are requesting more than 100% in total, the requests are rebalanced to keep the same ratio but use up exactly 100% of it. However, if the items request less than the full amount (such as three items that are each flex-grow: .25) then they’ll each get exactly what they request (25% of the free space to each, with the final 25% left unfilled). See §9.7 Resolving Flexible Lengths for the exact details of how free space is distributed.

この~patternは、 `flex-grow$p が 0 に近づくときの挙動を連続的にするために要求される（すなわち、駒は自由空間をまったく占めなくなることが求められる）。 さもなければ、駒は `flex-grow$p が `0^v にどこまで近づこうが — `1^v のときと同じく — 自由空間すべてを占め， 0 に十分~近くなった所で，いきなり，まったく占めなくなる。 この挙動があれば、 `flex-grow$p が `1^v から下へ縮短するに伴い［ 駒が占める自由空間は、次第に減り， 0 の所で無くなる ］ように滑らかに遷移することになる。 ◎ This pattern is required for continuous behavior as flex-grow approaches zero (which means the item wants none of the free space). Without this, a flex-grow: 1 item would take all of the free space; but so would a flex-grow: 0.1 item, and a flex-grow: 0.01 item, etc., until finally the value is small enough to underflow to zero and the item suddenly takes up none of the free space. With this behavior, the item instead gradually takes less of the free space as flex-grow shrinks below 1, smoothly transitioning to taking none of the free space at zero.

作者は、この “部分的に埋める” 挙動が特定的に欲されない限り， 1 以上の値を貫き続けるべきである。 例えば `1^v, `2^v を利用する方が `.33^v, `.67^v を利用するより，通例的に良い — その方が、駒が追加-／除去されたり, ~lineが折返されたときにも，意図される挙動が保たれると見込まれるので。 ◎ Unless this “partial fill” behavior is specifically what’s desired, authors should stick to values ≥ 1; for example, using 1 and 2 is usually better than using .33 and .67, as they’re more likely to behave as intended if items are added, removed, or line-wrapped.

<‘`flex-shrink$p’>

この `number^t 成分は、 `flex-shrink$p 下位propを設定して， `~flex縮短-係数@ を指定する。 それは、~flex容器の中で負の自由空間が配分される際に， `~flex駒$が他の一連の`~flex駒$に比して どれだけ縮短することになるのかを決定する。 省略されたときは、 `1^v に設定される。 負の自由空間を配分する際には、`~flex縮短-係数$は，`~flex基底s$で乗算される。 ◎ This <number> component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1.

注記： 負の空間を配分する際には、`~flex縮短-係数$は，`~flex基底~size$で乗算されることに注意。 これにより、負の空間は，駒が縮短できる量に比例するように配分され、例えば，大きい駒が~~相当に縮短されない限り，小さい駒が 0 まで縮短されないようにする。 ◎ Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.

<‘`flex-basis$p’>

この成分は、 `flex-basis$p 下位propを設定して， `~flex基底s@ を指定する。 それは、一連の~flex係数に則って自由空間が配分される前の，`~flex駒$の初期`主size$を与える。 ◎ This component sets the flex-basis longhand, which specifies the flex basis: the initial main size of the flex item, before free space is distributed according to the flex factors.

この成分は、 `width$p, `height$p ~propと同じ値を受容する（ただし， `auto$v:fb の扱いは異なる）ことに加えて，~keyword `content$v:fb も受容する： ◎ <‘flex-basis’> accepts the same values as the width and height properties (except that auto is treated differently) plus the content keyword:

`auto@v:fb

~flex駒にこの~keywordが指定された場合、 `flex-basis$p の使用値は，`主size~prop$の値から~~取得される。 その値も `~autoS$v である場合の使用値は， `content$v:fb になる。 ◎ When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis. If that value is itself auto, then the used value is content.

`content@v:fb

`~flex駒$の内容に基づく自動的~size（ 詳細は`~flex~layout~algo$を見よ ）を指示する（概して，`最大-内容~size$に等価になるが、［ 縦横比, 内在的~sizing拘束, 直交~flow ］を取扱うための調整も伴う）。 ◎ Indicates an automatic size based on the flex item’s content. (It is typically equivalent to the max-content size, but with adjustments to handle aspect ratios, intrinsic sizing constraints, and orthogonal flows; see details in §9 Flex Layout Algorithm.)

注記： この値は、この仕様の初期~releaseには無かったものであり，一部の古い実装では~supportされない。 等価な効果は、`主size~prop$ に `~autoS$v をあてがった上で， `auto^v を利用して得られる。 ◎ Note: This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be achieved by using auto together with a main size (width or height) of auto.

<‘`width$p’>

他のすべての値に対しては、 `width$p, `height$p に対するときと同じ仕方で解決される。 ◎ For all other values, flex-basis is resolved the same way as for width and height.

`flex$p 略式~propから省略された場合の指定値は、 `0^v になる。 ◎ When omitted from the flex shorthand, its specified value is 0.

`none@v:f

~keyword `none$v:f は，`0 0 auto^v に展開される。 ◎ The keyword none expands to 0 0 auto.

`flex$p の個々の成分の初期値による値は、 `flex$p:0_1_auto に等価になる。 ◎ The initial values of the flex components are equivalent to flex: 0 1 auto.

注記： `flex$p 略式~propから省略されたときの， `flex-grow$p, `flex-basis$p の初期値は、いずれも，それらの個別の下位propの既定~値とは異なる。 これは、最も共通的な事例に，`flex$p 略式~propがより良く適応できるようにするために、そのようにされている。 ◎ Note: The initial values of flex-grow and flex-basis are different from their defaults when omitted in the flex shorthand. This is so that the flex shorthand can better accommodate the most common cases.

［ 2 個の~flex係数 ］が前置されていない，単位の無い 0 は、~flex係数として解釈され~MUST。 誤解釈や無効な宣言を避けるため、作者は，単位を伴う 0 <‘`flex-basis$p’> 成分を指定するか, あるいは その前に 2 個の~flex係数を置か~MUST。 ◎ A unitless zero that is not already preceded by two flex factors must be interpreted as a flex factor. To avoid misinterpretation or invalid declarations, authors must specify a zero <‘flex-basis’> component with a unit or precede it by two flex factors.

7.2. ~flex性の各~成分

~flex性の個々の成分は，下位propにより独立に制御できる。 ◎ Individual components of flexibility can be controlled by independent longhand properties.

作者には、 `flex$p 略式~propを利用して ~flex性を制御することが奨励される — その各種~下位propを直に利用するのでなく。 この略式~propは、`共通的な用途$に適応するように，未指定の成分を正しく再設定するので。 ◎ Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

8.1. `auto^v ~marginによる整列-法

この節は参考である。 ~marginが~flex駒にどのように影響するかについての規範的な定義は、 `~flex~layout~algo$ 節にて与えられる。 ◎ This section is non-normative. The normative definition of how margins affect flex items is in the Flex Layout Algorithm section.

~flex駒~上の自動（ `auto^en ）~marginの効果は、塊~flowの下での自動~marginととてもよく似る： ◎ Auto margins on flex items have an effect very similar to auto margins in block flow:

• ~flex基底s, ~flex可能な長さの計算を行う間は， 自動~marginは `0^v に扱われる。 ◎ During calculations of flex bases and flexible lengths, auto margins are treated as 0.
• `justify-content$p, `align-self$p による整列に先立って， 正の自由空間は、その次元に属する自動~marginに配分される。 ◎ Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
• ~overflowする一連の~boxは、それらの`終端$方向の 自動~margin, ~overflow を無視する。 ◎ Overflowing boxes ignore their auto margins and overflow in the end direction.

注記： 自由空間が自動~marginに配分される場合、各種 `整列~prop$による，その次元に対する効果はなくなる。 ~flex処理の後に残される自由空間すべては、~marginにより奪われることになるので。 ◎ Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.

nav > ul {
  `display$p:flex;
}
nav > ul > #login {
  `margin-left$p:auto;
}

<nav>
  <ul>
<li><a href=/about>About</a>
<li><a href=/projects>Projects</a>
<li><a href=/interact>Interact</a>
<li id="login"><a href=/login>Login</a>
  </ul>
</nav>

8.2. 主-軸~沿いの整列： `justify-content^p ~prop

`justify-content$p ~propは、~flex容器の現在の~lineの`主-軸$沿いに，`~flex駒$を整列する。 これは、~flex可能な長さおよび`~auto_v~margin$が解決された後に行われる。 これは概して、~line上の`~flex駒$すべてについて，それぞれが［ ~flex不能, または ~flex可能であるが その最大~sizeに到達している ］ときの，残されて余った 自由空間の配分を補助する。 それはまた、~lineを~overflowする駒の整列について、ある程度の制御を~~供する。 ◎ The justify-content property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

`flex-start@v:j

`~flex駒$は~lineの始端に寄せるように収納される： ~line上の最初の`~flex駒$の`主-始端$ ~margin辺は，~lineの`主-始端$辺に接合され、後続の各`~flex駒$は，先行する駒に接合される。 ◎ Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item.

`flex-end@v:j

`~flex駒$は~lineの終端に寄せるように収納される： ~line上の最後の`~flex駒$の`主-始端$ ~margin辺は，~lineの`主-終端$辺に接合され、先行する各`~flex駒$は，後続の駒に接合される。 ◎ Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item.

`center@v:j

`~flex駒$は~lineの中央に寄せるように収納される： ~line上の一連の`~flex駒$は、互いに接合された上で、［ ~lineの`主-始端$辺と~line上の最初の駒との間 ］, および［ ~lineの`主-終端$辺と~line上の最後の駒との間 ］の空間が等量になるように，~lineの中央に寄せるように整列される。 （残された自由空間が負の場合、`~flex駒$は両~方向に等しく~overflowすることになる。） ◎ Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.)

`space-between@v:j

`~flex駒$は~line内に均等に分布される： 残された自由空間が負の場合，あるいは ~line上に在る`~flex駒$ が 1 個だけの場合、この値の効果は `flex-start$v:j と一致する。 他の場合、~line上の［ 最初／最後 ］の`~flex駒$の［ `主-始端$／`主-終端$ ］~margin辺が，~lineの［ `主-始端$／`主-終端$ ］辺に接合され、~line上の残りの`~flex駒$については，隣接する 2 つの駒の間隔がすべて一致するように，自由空間が配分される。 ◎ Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same.

`space-around@v:j

一連の`~flex駒$は、両端には半分~sizeの空間を伴う様に，~line内に均等に分布される： 残された自由空間が負であるか, または ~line上に在る`~flex駒$が 1 個だけの場合、この値の効果は `center$v:j と一致する。 他の場合、~line上の隣接するどの 2 つの`~flex駒$の間隔も同じ~sizeになり，その半分~sizeが［ ~line上の［ 最初／最後 ］の`~flex駒$と［ `~flex容器$辺 ］との間隔 ］に一致するように、自由空間が配分される。 ◎ Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to center. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items.

8.3. 交叉-軸~沿いの整列： `align-items^p と `align-self^p ~prop

~flex容器の~lineの中の一連の`~flex駒$は、方向が垂直にされることを除いて `justify-content$p と同様に，~lineの`交叉-軸$~~方向に整列させることができる。 `align-items$p は、匿名`~flex駒$も含め，~flex容器のすべての`~flex駒$用の既定の整列を設定する。 `align-self$p は、この既定の整列を，個々の`~flex駒$について上書きできるようにする。 （匿名~flex駒に対しては、 `align-self$p は，それに結び付けられている~flex容器~上の `align-items$p の値に常に合致する。） ◎ Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

`~flex駒$の交叉-軸~marginが両側とも `auto^v である場合、 `align-self$p の効果はない。 ◎ If either of the flex item’s cross-axis margins are auto, align-self has no effect.

各種~値の意味は、次で与えられる： ◎ Values have the following meanings:

`auto@v:as

`交叉-軸$の整列~制御を，親~box上の `align-items$p の値に委ねる。 （これが `align-self$p の初期値。） ◎ Defers cross-axis alignment control to the value of align-items on the parent box. (This is the initial value of align-self.)

`flex-start@v:ais

`~flex駒$の`交叉-始端$ ~margin辺は，~lineの`交叉-始端$辺に接合される。 ◎ The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

`flex-end@v:ais

`~flex駒$の`交叉-終端$ ~margin辺は，~lineの`交叉-終端$辺に接合される。 ◎ The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.

`center@v:ais

`~flex駒$の~margin~boxは，~line内の`交叉-軸$の中で中央~寄せにされる。 （ ~flex~lineの`交叉size$が`~flex駒$のそれより小さい場合、 それは両~方向に等しく~overflowすることになる。 ） ◎ The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)

`baseline@v:ais

`~flex駒$は `基底線~整列に関与-@ する — すなわち、~line上の，関与しているすべての`~flex駒$は、それらの基底線が互いに整列するように, かつ それらのうち［［［ 自身の［ 基底線と［ `交叉-始端$ ~margin辺 ］］の間の距離 ］が最~大になる駒 ］が，~lineの`交叉-始端$ 辺に接合される ］ように，整列される。 整列する軸に基底線を持たない`~flex駒$の基底線は、その~border~boxから`合成-$されるとする。 ◎ The flex item participates in baseline alignment: all participating flex items on the line are aligned such that their baselines align, and the item with the largest distance between its baseline and its cross-start margin edge is placed flush against the cross-start edge of the line. If the item does not have a baseline in the necessary axis, then one is synthesized from the flex item’s border box.

`stretch@v:ais

`交叉size~prop$が `~autoS$v に算出され, かつ 交叉-軸~marginの両側とも非 `auto^v の場合、`~flex駒$は `伸張-@ される。 その場合の使用値は，［ `min-height$p ／ `min-width$p ／ `max-height$p ／ `max-width$p ］により課される拘束の下で，［ その駒の~margin~boxの`交叉size$が，その~lineと同じ~sizeに可能な限り近くされる ］ような長さになる。 ◎ If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched. Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible, while still respecting the constraints imposed by min-height/min-width/max-height/max-width.

注記： ~flex容器の縦幅が拘束されている場合、この値により，`~flex駒$の内容が駒を~overflowさせ得る。 ◎ Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.

`~flex駒$の`交叉-始端$~margin辺は，その~lineの`交叉-始端$辺に接合される。 ◎ The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.

8.4. 一連の~flex~lineの収納-法： `align-content^p ~prop

`align-content$p ~propは、`交叉-軸$に余った空間があるときに，~flex容器の一連の~lineを~flex容器の中で整列する — `justify-content$p が個々の駒を`主-軸$の中で整列するときと同様に。 この~propは，`単-~line$ ~flex容器に対しては 効果はないことに注意。 各種~値の意味は，次で与えられる： ◎ The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

`flex-start@v:ac

一連の~lineは，~flex容器の始端に寄せるように収納される： ~flex容器の中の最初の~lineの`交叉-始端$辺は，~flex容器の`交叉-始端$辺に接合され、後続の各~lineは，先行する~lineに接合される。 ◎ Lines are packed toward the start of the flex container. The cross-start edge of the first line in the flex container is placed flush with the cross-start edge of the flex container, and each subsequent line is placed flush with the preceding line.

`flex-end@v:ac

一連の~lineは，~flex容器の終端に寄せるように収納される： ~flex容器の中の最後の~lineの`交叉-終端$辺は，~flex容器の`交叉-終端$辺に接合され、後続の各~lineは，先行する~lineに接合される。 ◎ Lines are packed toward the end of the flex container. The cross-end edge of the last line is placed flush with the cross-end edge of the flex container, and each preceding line is placed flush with the subsequent line.

`center@v:ac

一連の~lineは，~flex容器の中央に寄せるように収納される： ~flex容器の中の一連の~lineは、互いに接合された上で，~flex容器の中央に整列される —［ ~flex容器の`交叉-始端$内容~辺と ~flex容器の最初の~lineとの合間, ］, および［ ~flex容器の`交叉-終端$内容~辺と ~flex容器の最後の~lineとの合間 ］の空間が等量になるように（残された自由空間が負の場合，一連の~lineは両~方向に等しく~overflowすることになる）。 ◎ Lines are packed toward the center of the flex container. The lines in the flex container are placed flush with each other and aligned in the center of the flex container, with equal amounts of space between the cross-start content edge of the flex container and the first line in the flex container, and between the cross-end content edge of the flex container and the last line in the flex container. (If the leftover free-space is negative, the lines will overflow equally in both directions.)

`space-between@v:ac

一連の~lineは、~flex容器の中で均等に分布される： 残された自由空間が負の場合, または ~flex容器~内の~flex~lineが 1 本だけの場合、この値の効果は， `flex-start$v:ac と一致する。 他の場合、~flex容器の中の［ 最初／最後 ］の~lineの［ `交叉-始端$／`交叉-終端$ ］辺が，~flex容器の［ `交叉-始端$／`交叉-終端$ ］内容~辺に接合され，~flex容器の中の残りの~lineについては，隣接するどの 2 本の~lineの間隔も同じになるように、自由空間が配分される。 ◎ Lines are evenly distributed in the flex container. If the leftover free-space is negative or there is only a single flex line in the flex container, this value is identical to flex-start. Otherwise, the cross-start edge of the first line in the flex container is placed flush with the cross-start content edge of the flex container, the cross-end edge of the last line in the flex container is placed flush with the cross-end content edge of the flex container, and the remaining lines in the flex container are distributed so that the spacing between any two adjacent lines is the same.

`space-around@v:ac

一連の`~flex駒$は、両端には半分~sizeの空間を伴う様に，~flex容器の中で均等に分布される： 残された自由空間が負である場合、この値の効果は `center$v:ac と一致する。 他の場合、~flex容器の中の一連の~lineは［ 隣接するどの 2 本の~lineの間隔も同じ~sizeになり，その半分~sizeが［［ 最初／最後 ］の~lineと［ `~flex容器$辺 ］との間隔 ］になるように、自由空間が配分される。 ◎ Lines are evenly distributed in the flex container, with half-size spaces on either end. If the leftover free-space is negative this value is identical to center. Otherwise, the lines in the flex container are distributed such that the spacing between any two adjacent lines is the same, and the spacing between the first/last lines and the flex container edges is half the size of the spacing between flex lines.

`stretch@v:ac

一連の~lineは、残りの空間を占めるように伸張される： 残された自由空間が負の場合，この値の効果は `flex-start$v:ac に一致する。 他の場合、自由空間は，すべての~lineの合間が等しくになるように分割された上で それらの交叉sizeを増大させる。 ◎ Lines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.

注記： `複-~line$~flex容器のみが、`交叉-軸$~~方向に自由空間を持ち，一連の~lineは その中で整列されることになる。 `単-~line$~flex容器における唯一の~lineは，空間を埋めるために自動的に伸張されるので。 ◎ Note: Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

8.5. ~flex容器の基底線

`~flex容器$自身 — 以下，単に %容器 と記す — を`基底線~整列に関与-$させるためには（例： %容器 が，外縁の`~flex容器$内の`~flex駒$であるとき）、自身の内容を最も良く表現するような基底線の位置を %容器 に提出させる必要がある。 この~~目的において， %容器 の`基底線~集合$は、（ `order$p による並替えの後, かつ `flex-direction$p も織り込んだ上で，）以下に従って決定される基底線 %整列~基底線 から`生成される$ — 以下 “／” は同順とする： ◎ In order for a flex container to itself participate in baseline alignment (e.g. when the flex container is itself a flex item in an outer flex container), it needs to submit the position of the baselines that will best represent its contents. To this end, the baselines of a flex container are determined as follows (after reordering with order, and taking flex-direction into account):

`主-軸 基底線~集合@ 【主-軸に平行な基底線~集合】 ◎ first/last main-axis baseline set

%容器 の［ `行内-軸$と`主-軸$ ］が合致する場合、 %容器 の［ 最初／最後 ］の`主-軸 基底線~集合$は，次に従って決定される： ◎ When the inline axis of the flex container matches its main axis, its baselines are determined as follows:

1. %容器 内に次をいずれも満たすような`~flex駒$は在るならば：

   • ［ 最始端／最終端 ］の`~flex~line$に配置される

     【 “最始端” ／ “最終端” は、おそらく~layout後の位置を意味する。 したがって，原文には記述がないが、 `flex-wrap$p により指定される堆積~方向も織り込まれることになるはず。 】

   • `基底線~整列に関与-$する

   そのような駒たちが共有する`整列~基底線$が %整列~基底線 を与える。

   ◎ If any of the flex items on the flex container’s startmost/endmost flex line participate in baseline alignment, the flex container’s first/last main-axis baseline set is generated from the shared alignment baseline of those flex items.

2. 他の場合， %容器 内に`~flex駒$はあるならば、［ それらのうち［ 最始端／最終端 ］の駒 ］ %駒 が［ %容器 の`主-軸$に平行な`整列~基底線$ ］を：

   • 持つならば、それが %整列~基底線 を与える。
   • 持たないならば、 %駒 の~border~boxから`合成-$される`整列~基底線$が %整列~基底線 を与える。
   ◎ Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. (If that item has no alignment baseline parallel to the flex container’s main axis, then one is first synthesized from its border edges.)
3. 他の場合， %容器 は［ 最初／最後 ］の`基底線~集合$を持たない — この場合 ⇒ %容器 が属する`整列~文脈$の規則に則って`合成-$した結果が %整列~基底線 を与える。 ◎ Otherwise, the flex container has no first/last main-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.

`交叉-軸 基底線~集合@ 【交叉-軸に平行な基底線~集合】 ◎ first/last cross-axis baseline set

%容器 の［ `行内-軸$と`交叉-軸$ ］が合致する場合、 %容器 の［ 最初／最後 ］の`交叉-軸 基底線~集合$は、次に従って決定される： ◎ When the inline axis of the flex container matches its cross axis, its baselines are determined as follows:

1. %容器 内に`~flex駒$はあるならば、［ それらのうち［ 最始端／最終端 ］の駒 ］ %駒 が［ %容器 の`交叉-軸$に平行な`整列~基底線$ ］を：

   • 持つならば、それが %整列~基底線 を与える。
   • 持たないならば、 %駒 の~border~boxから`合成-$される`整列~基底線$が %整列~基底線 を与える。
   ◎ If the flex container has at least one flex item, the flex container’s first/last cross-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. (If that item has no alignment baseline parallel to the flex container’s cross axis, then one is first synthesized from its border edges.)
2. 他の場合， %容器 は［ 最初／最後 ］の`基底線~集合$を持たない — この場合 ⇒ %容器 が属する`整列~文脈$の規則に則って`合成-$した結果が %整列~基底線 を与える。 ◎ Otherwise, the flex container has no first/last cross-axis baseline set, and one is synthesized if needed according to the rules of its alignment context.

上述の規則に則って基底線を計算する際に，基底線を供与している~boxの `overflow$p が~scrollを許容する値にされている場合、その基底線を決定する目的においては，その~boxは初期~scroll位置にあるものと扱われ~MUST。 ◎ When calculating the baseline according to the above rules, if the box contributing a baseline has an overflow value that allows scrolling, the box must be treated as being in its initial scroll position for the purpose of determining its baseline.

~table~cellの基底線の決定 の際には、行l~boxや `table-row^v `CSS21$r のときとちょうど同じ様に，~flex容器が基底線を供する。 ◎ When determining the baseline of a table cell, a flex container provides a baseline just as a line box or table-row does. [CSS21]

基底線についての詳細は、 CSS Writing Modes 3 の 基底線 — 序論, および CSS Alingment Module の 基底線~整列の詳細 各~節を見よ。 ◎ See CSS Writing Modes 3 §4.1 Introduction to Baselines and CSS Box Alignment 3 §9 Baseline Alignment Details for more information on baselines.

9.1. 初期設定

1. ~flex駒 節の記述に従って， 一連の匿名~flex駒を生成する。 ◎ Generate anonymous flex items as described in §4 Flex Items.

9.2. ~line長さの決定

1. （ ［ 主, 交叉 ］沿いのそれぞれについて，一連の~flex駒に可用な空間を決定する ） ◎ Determine the available main and cross space for the flex items.＼

   `~flex容器$ %容器 の内容に`可用な空間$は、それぞれの次元について，次に従って与えられる： ◎ For each dimension,＼

   1. ~IF［ %容器 の内容~boxの~sizeは、その次元において`確定的$である ］ ⇒ その~size。 ◎ if that dimension of the flex container’s content box is a definite size, use that;＼
   2. ~ELIF［ %容器 の内容~boxは、その次元において［ `最小-内容 拘束$または`最大-内容 拘束$ ］の下で~sizeされている ］ ⇒ その拘束として与えられる。 ◎ if that dimension of the flex container is being sized under a min or max-content constraint, the available space in that dimension is that constraint;＼

   3. ~ELSE ⇒ その次元において、 %容器 に`可用な空間$から %容器 の［ ~margin + ~border + ~padding ］の分を減算した結果の値。 この値は無限にもなり得る。 ◎ otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value. This might result in an infinite value.

   例えば，［ `~autoS$v に~sizeされていて, `浮動-$している`~flex容器$ ］の中の~flex駒に`可用な空間$は【横組の下では】： ◎ For example, the available space to a flex item in a floated auto-sized flex container is:

   • 横~次元においては： ( `~flex容器$の包含塊の横幅 ) − ( `~flex容器$の横~次元の［ ~margin + ~border + ~padding ］ ) ◎ the width of the flex container’s containing block minus the flex container’s margin, border, and padding in the horizontal dimension
   • 縦~次元においては：無限 ◎ infinite in the vertical dimension

2. （ ~flex駒の`~flex基底~size$を決定する ）

   各 `~flex駒$ %駒 の `~flex基底~size@ は、次の手続きの結果で与えられる：

   ◎ Determine the flex base size and hypothetical main size of each item:
   1. ~IF［ %駒 の使用`~flex基底s$は`確定的$である ］ ⇒ ~RET その~size ◎ If the item has a definite used flex basis, that’s the flex base size.

   2. ~IF［ %駒 は次のいずれも満たす ］…： ◎ If the flex item has ...

      • 内在的~縦横比を有する ◎ an intrinsic aspect ratio,
      • 使用`~flex基底s$ ~EQ `content$v:fb ◎ a used flex basis of content, and
      • `交叉size$は`確定的$である ◎ a definite cross size,

      …ならば ⇒ ~RET %駒 の内縁 `交叉size$に %駒 の内在的~縦横比で乗除算して，主~次元に換算した結果 ◎ then the flex base size is calculated from its inner cross size and the flex item’s intrinsic aspect ratio.

   3. ~IF［ %駒 の使用`~flex基底s$ ~EQ `content$v:fb ］~OR［ %駒 の使用`~flex基底s$は %駒 に`可用な空間$に依存する ］： ◎ ↓

      1. ~IF［ ~flex容器は［ `最小-内容 拘束$または`最大-内容 拘束$ ］の下で~sizeされている（例えば 自動的~table~layout `CSS21$r を遂行するとき） ］ ⇒ ~RET %駒 をその拘束の下で~sizeした結果の， %駒 の`主size$ ◎ If the used flex basis is content or depends on its available space, and the flex container is being sized under a min-content or max-content constraint (e.g. when performing automatic table layout [CSS21]), size the item under that constraint. The flex base size is the item’s resulting main size.

      2. ~ELSE（すなわち， %駒 に可用な主sizeは無限であり, %駒 の`行内-軸$は`主-軸$に平行である） ⇒ ~RET ［ %駒 を直交~flow下にある~box用の規則 `CSS3-WRITING-MODES$r ］を利用して~lay-outした結果の， %駒 の最大-内容 `主size$ ◎ Otherwise, if the used flex basis is content or depends on its available space, the available main size is infinite, and the flex item’s inline axis is parallel to the main axis, lay the item out using the rules for a box in an orthogonal flow [CSS3-WRITING-MODES]. The flex base size is the item’s max-content main size.

         注記： この事例は，例えば、横書き`書字mode$の英語~文書が包含している~col~flex容器が，縦書き日本語`~flex駒$を包含しているときに生じる。 ◎ Note: This case occurs, for example, in an English document (horizontal writing mode) containing a column flex container containing a vertical Japanese (vertical writing mode) flex item.

   4. %駒 の使用`~flex基底s$を %駒 の`主size$に利用する下で， %駒 を`可用な空間$の中で~sizeする — ここで：

      • `~flex基底s$に対する値 `content$v:fb は `max-content$v と見なす
      • `主size$を決定する際に`交叉size$が必要であり（例えば %駒 の`主size$が %駒 の塊-軸に沿うとき）, かつ［ %駒 の交叉sizeが `auto$v:fb であって，`確定的$でない ］ならば、 %駒 の`交叉size$には `fit-content^v を利用する

      ~RET ~sizeした結果の %駒 の`主size$

      ◎ Otherwise, size the item into the available space using its used flex basis in place of its main size, treating a value of content as max-content. If a cross size is needed to determine the main size (e.g. when the flex item’s main size is in its block axis) and the flex item’s cross size is auto and not definite, in this calculation use fit-content as the flex item’s cross size. The flex base size is the item’s resulting main size.

   `~flex基底~size$を決定するときは、 %駒 の［ `最小-主size$, `最大-主size$ ］は無視される（切詰めは生じない）。 加えて、 `box-sizing$p を適用するときに内容~boxの~sizeを 0 以上に切上げる計算も無視される。 （例えば、駒に［ ~size 0, 正の~padding, `box-sizing$p:border-box ］が指定されている場合、駒の外縁`~flex基底~size$は 0 になる結果，その内縁`~flex基底~size$は負になる。） ◎ When determining the flex base size, the item’s min and max main sizes are ignored (no clamping occurs). Furthermore, the sizing calculations that floor the content box size at zero when applying box-sizing are also ignored. (For example, an item with a specified size of zero, positive padding, and box-sizing: border-box will have an outer flex base size of zero—and hence a negative inner flex base size.)

3. （ ~flex駒の`仮の主size$を決定する ）

   各 `~flex駒$ %駒 の `仮の主size@ は、次で与えられる ⇒ %駒 の`~flex基底~size$を %駒 の使用［ `最小-主size$, `最大-主size$ ］に則って（および，内容~boxの~sizeは 0 以上に切上げるように）切詰めた結果

   ◎ The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).

4. （ ~flex容器の`主size$を決定する ）

   `~flex容器$の`主size$を、それが関与する整形~文脈の規則を利用して決定する — この算出にあたっては、~flex駒に対する `auto^v ~marginは `0^v とみなすとする。

   ◎ Determine the main size of the flex container using the rules of the formatting context in which it participates. For this computation, auto margins on flex items are treated as 0.

9.3. 主sizeの決定

1. 一連の~flex~lineの中に，~flex駒を収集する ： ◎ Collect flex items into flex lines:

   ~flex容器は`単-~line$ならば

   すべての~flex駒を単独の~flex~lineに収集する ◎ If the flex container is single-line, collect all the flex items into a single flex line.

   ~flex容器は`複-~line$ならば

   まだ未収集の最初の駒から順に，連続する駒を，［ 収集される 次の 駒が，~flex容器の内縁 主sizeに収まらないような最初のものになる ］まで, または［ 強制分断に遭遇する（ ~flex~layoutの断片化 節を見よ） ］まで、順次 収集していく。 ただし，いきなり最初の未収集の駒が収まり切らないようであれば、単に，それのみを~~現在の~lineに収集する。 ◎ Otherwise, starting from the first uncollected item, collect consecutive items one by one until the first time that the next collected item would not fit into the flex container’s inner main size (or until a forced break is encountered, see §10 Fragmenting Flex Layout). If the very first uncollected item wouldn’t fit, collect just it into the line.

   この段においては、~flex駒の~sizeは，その外縁 `仮の主size$とする。 ◎ For this step, the size of a flex item is its outer hypothetical main size.

   すべての~flex駒が，一連の~flex~lineに収集されるまで、上を繰り返す。 ◎ Repeat until all flex items have been collected into flex lines.

   注記： “可能な限り収集する” ことにより、~size 0 の~flex駒は，最後の非 0 ~sizeの駒が~lineを正確に “埋尽くして” いたとしても，前の~lineの終端に収集されることになる。 ◎ Note that the "collect as many" line will collect zero-sized flex items onto the end of the previous line even if the last non-zero item exactly "filled up" the line.

2. ~flex可能な長さを解決-して（ 9.7 節）、すべての~flex駒について，その使用`主size$を見出す。 ◎ Resolve the flexible lengths of all the flex items to find their used main size. See §9.7 Resolving Flexible Lengths.

9.4. 交叉sizeの決定

1. （ 駒の`仮の交叉size$を決定する ）

   各~駒の `仮の交叉size@ を、［ `~autoS$v は `fit-content^v であると見なした下で，`可用な空間$において使用`主size$による~layoutを遂行する ］ことにより，決定する

   ◎ Determine the hypothetical cross size of each item by performing layout with the used main size and the available space, treating auto as fit-content.

2. （ 各~flex~lineの交叉sizeを計算する ）： ◎ Calculate the cross size of each flex line.

   1. ~IF［ ~flex容器は`単-~line$である ］~AND［ ~flex容器の`交叉size$は`確定的$である ］ ⇒ ~flex~lineの`交叉size$ ~SET `~flex容器$の内縁 `交叉size$ ◎ If the flex container is single-line and has a definite cross size, the cross size of the flex line is the flex container’s inner cross size.

   2. ~IF［ `~flex容器$は`複-~line$である ］： ◎ Otherwise, for each flex line:

      1. ~EACH( `~flex~line$ %~line ) に対し：

         1. ( %交叉size, %上面~size, %下面~size ) ~LET ( 0, 0, 0 )

         2. %~line 内の ~EACH( `~flex駒$ %駒 ) に対し：

            1. ~IF［ %駒 は次をすべて満たす ］…：

               • 行内-軸は主-軸に平行である
               • `align-self$p は `baseline$v:ais
               • 交叉-軸~marginは両側とも非 `auto^v

               …ならば：

               1. %上面~size ~SET `max^op( %上面~size, %駒 の基底線と %駒 の仮の外縁 交叉-始端~辺との合間の距離 )
               2. %下面~size ~SET `max^op( %下面~size, %駒 の基底線と %駒 の仮の外縁 交叉-終端~辺との合間の距離 )
            2. ~ELSE ⇒ %交叉size ~SET `max^op( %交叉size, %駒 の外縁 `仮の交叉size$ )
            ◎ Collect all the flex items whose inline-axis is parallel to the main-axis, whose align-self is baseline, and whose cross-axis margins are both non-auto. Find the largest of the distances between each item’s baseline and its hypothetical outer cross-start edge, and the largest of the distances between each item’s baseline and its hypothetical outer cross-end edge, and sum these two values. ◎ Among all the items not collected by the previous step, find the largest outer hypothetical cross size.
         3. %~line の使用~交叉size は次で与えられる ⇒ `max^op( %交叉size, ( %上面~size ~PLUS %下面~size ) ) ◎ The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero.
   3. ~IF［ ~flex容器は`単-~line$である ］ ⇒ その~lineの~交叉sizeを 容器の算出d［ `最小-交叉size$, `最大-交叉size$ ］で切詰める。 CSS 2.1 による `min/max-width/height^p の定義が より一般に適用される場合、この挙動は自動的に `fall out^en することに注意【？】。 ◎ If the flex container is single-line, then clamp the line’s cross-size to be within the container’s computed min and max cross sizes. Note that if CSS 2.1’s definition of min/max-width/height applied more generally, this behavior would fall out automatically.

3. （ `align-content^p:stretch を取扱う ） ◎ Handle 'align-content: stretch'.＼

   ~IF［ ~flex容器は次をすべて満たす ］…：

   • 交叉sizeは`確定的$である
   • `align-content$p は `stretch$v:ac
   • 内縁 交叉size ~GT 一連の~flex~lineの交叉sizeの総和

   ◎ If the flex container has a definite cross size, align-content is stretch, and the sum of the flex lines' cross sizes is less than the flex container’s inner cross size,＼

   …ならば ⇒ 各~flex~lineの交叉sizeを，次が満たされるように等量に増大させる ⇒ すべての~flex~lineの交叉sizeの総和 ~EQ ~flex容器の内縁 交叉size ◎ increase the cross size of each flex line by equal amounts such that the sum of their cross sizes exactly equals the flex container’s inner cross size.

4. （ `visibility^p:collapse にされている駒を`畳む$ ） ◎ Collapse visibility:collapse items.＼

   ~IF［ `visibility$p:collapse にされている~flex駒はある ］： ◎ If any flex items have visibility: collapse,＼

   1. そのような ~EACH ( %駒 )に対し ⇒ %駒 の `支柱~size@ ~SET %駒 が属する~lineの交叉size ◎ note the cross size of the line they’re in as the item’s strut size, and＼

   2. ~layoutを最初から再開始する — この 2 周目の~layout回においては： ◎ restart layout from the beginning. ◎ In this second layout round,＼

      • 駒を一連の~lineに収集する段においては ⇒ `畳まれ$た駒の`主size$は， 0 として扱う ◎ when collecting items into lines, treat the collapsed items as having zero main size.＼
      • 前項の段から 各~lineの交叉sizeを計算する段までは ⇒ `畳まれ$た駒については，まるごと（ `display$p:none であったかのように）無視する ◎ For the rest of the algorithm following that step, ignore the collapsed items entirely (as if they were display:none) except that＼
      • 前項より後の段においては ⇒ 各~lineの交叉sizeを［ その~line内の`畳まれ$た すべての駒の中で最~大の支柱~size ］以上になる様に切り上げる。 ◎ after calculating the cross size of the lines, if any line’s cross size is less than the largest strut size among all the collapsed items in the line, set its cross size to that strut size.

   2 周目の~layout回においては，この段は飛ばす。 ◎ Skip this step in the second layout round.

5. （ 各~flex駒の使用~交叉sizeを決定する ） ◎ Determine the used cross size＼

   ~EACH( `~flex駒$ %駒 ) に対し： ◎ of each flex item.＼

   1. ~IF［ %駒 は次をすべて満たす ］…：

      • `align-self$p:stretch にされている
      • `交叉size~prop$の算出値は `~autoS$v
      • 交叉-軸~marginは両側とも非 `auto^v

      …ならば ⇒ %駒 の使用（外縁）交叉size ~SET ［ %駒 が属する~flex~lineの使用~交叉size ］を %駒 の使用［ `最小-交叉size$, `最大-交叉size$ ］に則って切詰めた結果

      ◎ If a flex item has align-self: stretch, its computed cross size property is auto, and neither of its cross-axis margins are auto, the used outer cross size is the used cross size of its flex line, clamped according to the item’s used min and max cross sizes.＼
   2. ~ELSE ⇒ %駒 の使用~交叉size ~SET %駒 の`仮の交叉size$ ◎ Otherwise, the used cross size is the item’s hypothetical cross size.
   3. ~IF［ %駒 は `align-self$p:stretch にされている ］ ⇒ ~sizeが百分率の子を解決できるようにするため、前~段で得られた使用~sizeを %駒 の確定的な交叉sizeとみなす下で， %駒 の内容の~layoutをやり直す ◎ If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.

   注記： この段は %駒 の`主size$には影響しない。 それが内在的~縦横比を有していたとしても。 ◎ Note that this step does not affect the main size of the flex item, even if it has an intrinsic aspect ratio.

9.5. 主-軸~沿いの整列

1. （ 自由空間を配分する ） ◎ Distribute any remaining free space.＼

   ~EACH( ~flex~line %~line ) に対し： ◎ For each flex line:

   1. %自由空間 ~LET `max^op( %~line の自由空間, 0 ) ◎ ↓
   2. ~IF［ %~line の主-軸~marginは両側とも `auto^v ］ ⇒ 両側の~margin ~SET %自由空間 ~DIV 2 ◎ If the remaining free space is positive and at least one main-axis margin on this line is auto, distribute the free space equally among these margins.＼ ◎ Otherwise, set all auto margins to zero.
   3. ~ELIF［ %~line の主-軸~marginは片側だけ `auto^v ］ ⇒ その~~側の~margin ~SET %自由空間 ◎ ↑
   4. %~line 内の一連の駒を， `justify-content$p に従って主-軸~沿いに整列させる ◎ Align the items along the main-axis per justify-content.

9.6. 交叉-軸~沿いの整列

1. （ 交叉-軸 `auto^v ~marginを解決する ）

   この段における［ 始端 ／ 終端 ］は、`交叉-軸$における［ `始端$／`終端$ ］を指すとする。

   ~EACH( ~flex駒 %駒 ) に対し：

   ◎ Resolve cross-axis auto margins.＼
   1. ~IF［ %駒 の交叉-軸~marginは両側とも非 `auto^v ］ ⇒ ~CONTINUE ◎ If a flex item has auto cross-axis margins:
   2. %交叉size ~LET %駒 が属する~flex~lineの交叉size ◎ ↓
   3. %差分~size ~LET %交叉size − ［ `auto^v ~marginは 0 とみなす下での， %駒 の外縁 交叉size ］ ◎ ↓
   4. ~IF［ %差分~size ~GT 0 ］ ⇒ %駒 の［ 始端, 終端 ］~marginのうち `auto^v にされている各側に， %差分~size を等量に配分する ◎ If its outer cross size (treating those auto margins as zero) is less than the cross size of its flex line, distribute the difference in those sizes equally to the auto margins.
   5. ~ELIF［ %駒 の始端~margin は `auto^v ］ ⇒ %駒 の始端~margin ~SET 0 ◎ Otherwise, if the block-start or inline-start margin (whichever is in the cross axis) is auto, set it to zero.＼

   6. %駒 の終端~marginを ［ %駒 の外縁 交叉size ~EQ %交叉size ］になるように設定する

      【 原文の記述は、前~段の条件が満たされる場合に限り，この段を行うようにも読め、はっきりしない。 】

      ◎ Set the opposite margin so that the outer cross size of the item equals the cross size of its flex line.

2. （ %駒 を交叉-軸~沿いに整列する ）

   ~EACH( ~flex駒 %駒 ) に対し ⇒ ~IF［ %駒 の交叉-軸~marginは両側とも非 `auto^v ］ ⇒ %駒 の `align-self$p に従って， %駒 を交叉-軸~沿いに整列する

   ◎ Align all flex items along the cross-axis per align-self, if neither of the item’s cross-axis margins are auto.

3. （ ~flex容器の使用~交叉sizeを決定する ） ◎ Determine the flex container’s used cross size:

   ~flex容器の使用~交叉size ~SET［ `交叉size~prop$の~sizeは `確定的$ならば それ ／ ~ELSE_ 一連の~flex~lineの交叉sizeの総和 ］を，`~flex容器$の使用［ `最小-交叉size$, `最大-交叉size$ ］で切詰めた結果 ］ ◎ If the cross size property is a definite size, use that, clamped by the used min and max cross sizes of the flex container. ◎ Otherwise, use the sum of the flex lines' cross sizes, clamped by the used min and max cross sizes of the flex container.

4. （ すべての~flex~lineを整列する ）

   ~flex容器~内のすべての~flex~lineを，容器の `align-content$p に従って整列する

   ◎ Align all flex lines per align-content.

9.7. ~flex可能な長さの解決-法

1. %容器~size ~LET ~flex容器の内縁 `主size$ ◎ ↓
2. %伸縮~mode ~LET ［ 各 駒の外縁 `使用~主~size^i の総和 ~LT %容器~size ならば `伸長-^i ／ ~ELSE_ `縮短-^i ］ ⇒ 以下における “駒の `~flex係数^i” は、 %伸縮~mode に応じて［ `伸長-^i ならば 駒の`~flex伸長-係数$ ／ `縮短-^i ならば 駒の`~flex縮短-係数$ ］を表すとする ◎ Determine the used flex factor. Sum the outer hypothetical main sizes of all items on the line. If the sum is less than the flex container’s inner main size, use the flex grow factor for the rest of this algorithm; otherwise, use the flex shrink factor.

3. （ ~flex不能な駒を~sizeする ）

   次のいずれかを満たすような ~EACH ( %駒 ) を凍結する： ◎ Size inflexible items. Freeze, setting its target main size to its hypothetical main size…

   • %駒 の `~flex係数^i ~EQ 0 ◎ any item that has a flex factor of zero
   • ［ %伸縮~mode ~EQ `伸長-^i ］~AND［ %駒 の`~flex基底~size$ ~GT %駒 の `使用~主~size^i ］ ◎ if using the flex grow factor: any item that has a flex base size greater than its hypothetical main size
   • ［ %伸縮~mode ~EQ `縮短-^i ］~AND［ %駒 の`~flex基底~size$ ~LT %駒 の `使用~主~size^i ］ ◎ if using the flex shrink factor: any item that has a flex base size smaller than its hypothetical main size

4. 以下において， `残りの自由空間を計算-^i するときは、次を返すとする ⇒ %容器~size − ( すべての駒の，その時点における `外縁~size^i の総和 )

   ここで， %駒 の `外縁~size^i は、次で与えられる ⇒ %駒 は未~凍結ならば %駒 の外縁`~flex基底~size$ ／ ~ELSE_ %駒 の外縁 `使用~主~size^i

   ◎ Calculate initial free space. Sum the outer sizes of all items on the line, and subtract this from the flex container’s inner main size. For frozen items, use their outer target main size; for other items, use their outer flex base size.
5. %初期~自由空間 ~LET `残りの自由空間を計算-^i した結果 ◎ ↑

6. ~WHILE［ 未~凍結なる駒はある ］： ◎ Loop: ◎ Check for flexible items. If all the flex items on the line are frozen, free space has been distributed; exit this loop.

   1. %残りの自由空間 ~LET `残りの自由空間を計算-^i した結果 ◎ Calculate the remaining free space as for initial free space, above.＼
   2. %~flex係数の総和 ~LET 未~凍結なるすべての駒の `~flex係数^i の総和 ◎ If the sum of the unfrozen flex items’ flex factors＼

   3. ~IF［ %~flex係数の総和 ~LT 1 ］：

      1. %上限 ~LET %初期~自由空間 × %~flex係数の総和
      2. ~IF［ %残りの自由空間 の絶対値 ~GT %上限 の絶対値 ］ ⇒ %残りの自由空間 ~SET %上限
      ◎ is less than one, multiply the initial free space by this sum. If the magnitude of this value is less than the magnitude of the remaining free space, use this as the remaining free space.

   4. （ ~flex係数に比例するように自由空間を配分する ） ◎ Distribute free space proportional to the flex factors.

      ~IF［ %残りの自由空間 ~NEQ 0 ］： ◎ If the remaining free space is zero ◎ Do nothing.

      1. ~IF［ %伸縮~mode ~EQ `伸長-^i ］ ⇒ 未~凍結なる ~EACH ( %駒 ) に対し ⇒ %駒 の `使用~主~size^i ~SET %駒 の`~flex基底~size$ ~PLUS ( %残りの自由空間 ~MUL ( ( %駒 の `~flex係数^i ) ~DIV %~flex係数の総和 )) ◎ If using the flex grow factor ◎ Find the ratio of the item’s flex grow factor to the sum of the flex grow factors of all unfrozen items on the line. Set the item’s target main size to its flex base size plus a fraction of the remaining free space proportional to the ratio.

      2. ~ELSE（ %伸縮~mode ~EQ `縮短-^i ）：

         この段においては、各 駒は `拡縮済み~flex縮短-係数@i を持つ。

         1. 未~凍結なる ~EACH ( %駒 ) に対し ⇒ %駒 の `拡縮済み~flex縮短-係数^i ~SET ( %駒 の `~flex係数^i ) ~MUL ( %駒 の内縁`~flex基底~size$ )
         2. %係数の総和 ~LET 未~凍結なる すべての %駒 の `拡縮済み~flex縮短-係数^i の総和
         3. 未~凍結なる ~EACH ( %駒 ) に対し ⇒ %駒 の `使用~主~size^i ~SET ( %駒 の`~flex基底~size$ ) ~MINUS ( ( %残りの自由空間 の絶対値 ) ~MUL ( ( %駒 の `拡縮済み~flex縮短-係数^i ) ~DIV %係数の総和 ))

         注記： これにより、駒の内縁 `主size$は，一時的に負になり得るが，次の段で正される。

         ◎ If using the flex shrink factor ◎ For every unfrozen item on the line, multiply its flex shrink factor by its inner flex base size, and note this as its scaled flex shrink factor. Find the ratio of the item’s scaled flex shrink factor to the sum of the scaled flex shrink factors of all unfrozen items on the line. Set the item’s target main size to its flex base size minus a fraction of the absolute value of the remaining free space proportional to the ratio. Note this may result in a negative inner main size; it will be corrected in the next step. ◎ Otherwise ◎ Do nothing.

   5. （ 最小-／最大- 違反を補正する ）

      未~凍結なる ~EACH ( %駒 ) に対し ⇒ %駒 の `使用~主~size^i ~SET `使用~主~size^i を %駒 の使用［ `最小-主size$, `最大-主size$ ］で — %駒 の内容~boxの~sizeは 0 以上に切上げるように — 切詰めた結果

      これにより， %使用~主size が［ 増えた駒は “最小-違反” ／ 減った駒は “最大-違反” ］とされる。

      ◎ Fix min/max violations. Clamp each non-frozen item’s target main size by its used min and max main sizes and floor its content-box size at zero. If the item’s target main size was made smaller by this, it’s a max violation. If the item’s target main size was made larger by this, it’s a min violation.

   6. （ ~flexが効き過ぎている駒を凍結する ）

      未~凍結なる駒のうち，［ 前~段による切詰め量の総和（減った量は負とみなす）に応じて［ 0 ならば すべて ／ 正ならば 最小-違反とされたもの ／ 負ならば 最大-違反とされたもの ］を凍結する

      ◎ Freeze over-flexed items. The total violation is the sum of the adjustments from the previous step ∑(clamped size - unclamped size). If the total violation is: • Zero •• Freeze all items. • Positive •• Freeze all the items with min violations. • Negative •• Freeze all the items with max violations. • Return to the start of this loop. • Set each item’s used main size to its target main size.

9.8. 確定的~size／不定~size

CSS Sizing `CSS-SIZING-3$r では，長さが 確定的 ／ 不定 であることを定義しているが、 Flexbox においては、長さが `確定的@ と見なされ得る，いくつかの追加の事例がある： ◎ Although CSS Sizing [CSS-SIZING-3] defines definite and indefinite lengths, Flexbox has several additional cases where a length can be considered definite:

1. `単-~line$ `~flex容器$の`交叉size$が確定的である場合、`伸張-$されているどの`~flex駒$についても，その外縁 `交叉size$は［ ~flex容器の（`~flex駒$の［ 最小-, 最大- ］`交叉size$に切詰められた）内縁 `交叉size$ ］になり，`確定的$と見なされる。 ◎ If a single-line flex container has a definite cross size, the outer cross size of any stretched flex items is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered definite.
2. `~flex容器$の`主size$は`確定的$である場合、`~flex駒$ %駒 の~flex後の`主size$は`確定的$と扱われる — それが、同じ~line内にある他の~flex駒の`不定$~sizeに依拠できるとしても。 ◎ If the flex container has a definite main size, a flex item’s post-flexing main size is treated as definite, even though it can rely on the indefinite sizes of any flex items in the same line.
3. `~flex~line$の`交叉size$が決定されたなら、 `auto^v で~sizeされている`~flex容器$内の各~駒も，~layoutの目的においては確定的と見なされる — 駒の交叉sizeを決定する段 を見よ。 ◎ Once the cross size of a flex line has been determined, items in auto-sized flex containers are also considered definite for the purpose of layout; see step 11.

注記： 駒の~sizeは、駒が`全部的に~flex不能$である, かつ`~flex基底s$は確定的であるならば，定義により`確定的$になる。 ◎ Note: The main size of a fully inflexible item with a definite flex basis is, by definition, definite.

9.9. 内在的~size

`~flex容器$の`内在的~sizing$は、種々の型の 内容に基づく自動的~sizingの基になる — `内容収納~行内~size$（内容収納（ fit-content ）公式が利用される）や, 内容に基づく`塊~size$（`最大-内容~size$が利用される）など。 ◎ The intrinsic sizing of a flex container is used to produce various types of content-based automatic sizing, such as shrink-to-fit logical widths (which use the fit-content formula) and content-based logical heights (which use the max-content size).

この節に現れる各種~用語については、`CSS-SIZING-3$r を見よ。 ◎ See [CSS-SIZING-3] for a definition of the terms in this section.

10.1. ~flex断片化~algoの見本

この参考節では、~flex容器の断片化~algoとして考え得る見本を示す。 実装者には，この~algoを改良して CSS Working Group まで ~feedbackを寄せられる よう願う。 ◎ This informative section presents a possible fragmentation algorithm for flex containers. Implementors are encouraged to improve on this algorithm and provide feedback to the CSS Working Group.