Skip to content

Commit 17af69d

Browse files
committed
updated use of "size" vs. "margin box size" in layout algorithm
1 parent bf0c80d commit 17af69d

1 file changed

Lines changed: 17 additions & 11 deletions

File tree

css3-flexbox/Overview.src.html

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -966,7 +966,7 @@ <h2 id='layout-algorithm'>
966966
<p>In column-direction flexbox, shrink-to-fit size of a flex item along the main axis
967967
is the extent in block direction that it gets when laid
968968
out using its &#39;fit-content&#39; as its size in inline
969-
direction, using cross-size of flexbox content box as
969+
direction and using cross-size of flexbox content box as
970970
available measure, also as defined in
971971
[[!CSS3-WRITING-MODES]]. </p>
972972
<p>In multi-line column-direction flexbox, cross-size of the whole flexbox content box is used as available measure, not the share of individual flexbox line, to avoid a circular dependency of line breaks on shrink-to-fit calculations.</p>
@@ -999,7 +999,10 @@ <h2 id='layout-algorithm'>
999999
</ul>
10001000
</li>
10011001

1002-
<li>Collect as many consecutive flexbox items as possible, starting from the first item, while keeping the sum of their main size smaller than the flexbox's available space. If a flexbox item is sized with a flexible length, then for the purpose of this step, clamp the item's size between its minimum and maximum main sizes. The items so collected form a single flexbox line.</li>
1002+
<li>Collect as many consecutive flexbox items as possible, starting from the first item, while keeping the sum of their
1003+
margin-box main size smaller than the flexbox's available space.
1004+
If a flexbox item is sized with a flexible length, then for the
1005+
purpose of this step, clamp its size between its minimum and maximum main sizes. The items so collected form a single flexbox line.</li>
10031006

10041007
<li>Repeat the previous step, starting each time from the first flexbox item not yet collected into a flexbox line, until all flexbox items have been collected into flexbox lines.</li>
10051008
</ol>
@@ -1072,8 +1075,7 @@ <h2 id='layout-algorithm'>
10721075
<li>Layout all items again in their final size and position.
10731076
Implementations can determine when this step is needed and how it can be
10741077
optimized, but for precise results it has to be assumed that this step
1075-
is performed, because the layout of each item&#39;s content may change when
1076-
ea</li>
1078+
is performed.</li>
10771079
</ol>
10781080

10791081
<p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
@@ -1083,17 +1085,18 @@ <h2 id='layout-algorithm'>
10831085
Determine sign of flexibility
10841086

10851087
<ol>
1086-
<li>Add sizes of all items, <i>adjusted for min/max</i>.
1088+
<li>Add margin-box hypothetical main sizes of all items, <i>adjusted for min/max</i>.
10871089

1088-
<li>If sum of preferred sizes is less than available space, use positive flexibility, otherwise use negative flexibility.</li>
1090+
<li>If the sum is less than available space, use positive flexibility, otherwise use negative flexibility.</li>
10891091
</ol>
10901092

10911093
<p>for the rest of the algorithm use flexibility with the sign determined in this step</p>
10921094
</li>
10931095

10941096
<li>Reset all flexible sizes to their preferred size</li>
10951097

1096-
<li>Find free space by subtracting sum of item sizes from available space.</li>
1098+
<li>Find free space by subtracting sum of margin-box main sizes of
1099+
flexbox items from available space.</li>
10971100

10981101
<li>
10991102
Distribute free space proportional to flex:
@@ -1201,12 +1204,14 @@ <h2 id="pagination">
12011204

12021205
<ol>
12031206
<li>
1204-
<p>If flexbox main-axis size is definite, flexbox algorithm must be run first, without constraints of available space on page and using all content of the flexbox. Otherwise items use the preferred size, adjusted for min/max.</p>
1207+
<p>If flexbox main-axis size is definite, flexbox algorithm must be run first, without constraints of available space on page and using all content of the flexbox. Otherwise
1208+
flexbox items use the preferred size, adjusted for min/max.</p>
12051209

12061210
<p>If page size varies and flexbox size depends on page size, this step has to be repeated on each page, again with the whole content of the flexbox.</p>
12071211
</li>
12081212

1209-
<li>Set of items that will fit on current page is determined by adding main-axis sizes of items until total size exceeds
1213+
<li>Set of items that will fit on current page is determined by adding main-axis
1214+
margin-box sizes of flexbox items until total size exceeds
12101215
available space or a forced break is encountered.</li>
12111216

12121217
<li>If border box of an item doesn’t fit in available space, a break inside the item is considered</li>
@@ -1254,7 +1259,7 @@ <h2 id="pagination">
12541259
<p>If page size varies and flexbox size depends on page size, this step needs to be repeated on each page.</p>
12551260
</li>
12561261

1257-
<li>Items are sized and positioned as usual, but in block-direction available space of min(remaining available space in flexbox, remaining space on the page).</li>
1262+
<li>Flexbox items are sized and positioned as usual, but in block-direction available space of min(remaining available space in flexbox, remaining space on the page).</li>
12581263

12591264
<li>Any items with baseline alignment must be aligned before considering breaks inside items.</li>
12601265

@@ -1267,7 +1272,8 @@ <h2 id="pagination">
12671272
<ol>
12681273
<li>For the purposes of cross-axis alignment, minimum of remaining available space in flexbox and available space at current page is used.</li>
12691274

1270-
<li>If an item is broken in the previous step and its alignment is not baseline, its cross-axis size is set to available space. If item alignment is baseline, its cross-axis size is adjusted so that it extends to exactly the end of available space.</li>
1275+
<li>If an item is broken in the previous step and its alignment is not baseline, its cross-axis
1276+
margin-box size is set to available space. If item alignment is baseline, its cross-axis size is adjusted so that it extends to exactly the end of available space.</li>
12711277
</ol>
12721278
</li>
12731279
</ol>

0 commit comments

Comments
 (0)