Skip to content

Commit b174790

Browse files
tabatkinstabatkins
committed
Finished main algo.
--HG-- extra : rebase_source : 08d35c1135895ba71f5b6720d96d773f52d16d40
1 parent 252e4cb commit b174790

2 files changed

Lines changed: 150 additions & 148 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 68 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,10 @@ <h2 class="no-num no-toc" id=table>Table of contents</h2>
235235

236236
<li><a href="#layout-algorithm"><span class=secno>9. </span> Flexbox
237237
Layout Algorithm</a>
238+
<ul class=toc>
239+
<li><a href="#resolve-flexible-lengths"><span class=secno>9.1. </span>
240+
Resolving Flexible Lengths</a>
241+
</ul>
238242

239243
<li><a href="#pagination"><span class=secno>10. </span> Page breaks in
240244
flexbox</a>
@@ -2095,111 +2099,86 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
20952099
Or are they really shrink-wrap, such that we need to adjust the main
20962100
size here, now that we know the length of the longest line?
20972101

2098-
<li>For each flexbox line,
2099-
<ol>
2100-
<li><a href="#resolve-the-flexible-lengths"><i>Resolve the flexible
2101-
lengths</i></a> of the items contained within it. All flexbox items now
2102-
have a final main size. Update each item's hypothetical cross size
2103-
based on this main size.
2104-
2105-
<li>Calculate the leftover free-space by subtracting the sum of the
2106-
margin-box main sizes of the items on the line from the main size of
2107-
the flexbox's content box.
2108-
2109-
<li>Resolve &lsquo;<code class=css>auto</code>&rsquo; margins on main
2110-
axis:
2111-
<ol>
2112-
<li>If leftover free-space is positive and any items on this line have
2113-
at least one main-axis margin set to &lsquo;<code
2114-
class=css>auto</code>&rsquo;, distribute the leftover free-space
2115-
equally to these margins.
2102+
<li> <a href="#resolve-flexible-lengths">Resolve the flexible lengths</a>
2103+
of all the flexbox items to find their used main size. Determine their
2104+
hypothetical cross size from this main size.
21162105

2117-
<li>Otherwise, any main-axis &lsquo;<code class=css>auto</code>&rsquo;
2118-
margins on items in this line are set to zero.
2119-
</ol>
2106+
<li> Distribute any remaining free space. For each flexbox line:
2107+
<ol>
2108+
<li> If the remaining free space is positive and at least one main-axis
2109+
margin on this line is &lsquo;<code class=css>auto</code>&rsquo;,
2110+
distribute the free space equally among these margins. Otherwise, set
2111+
all &lsquo;<code class=css>auto</code>&rsquo; margins to zero.
21202112

21212113
<li> Align the items along the main axis per &lsquo;<a
21222114
href="#flex-pack0"><code class=property>flex-pack</code></a>&rsquo;.
21232115
</ol>
21242116

2125-
<li>Calculate the cross size of each flexbox line. For each flexbox line:
2117+
<li> Calculate the cross size of each flexbox line. For each flexbox line:
2118+
21262119
<ol>
2127-
<li>If the flexbox is single-line and has a definite cross size, the
2128-
single flexbox line's cross size is the cross size of the flexbox's
2129-
content box. End this step of the algorithm.
2130-
2131-
<li>If main axis is parallel to inline axis, collect all the flexbox
2132-
items with a &lsquo;<a href="#flex-item-align"><code
2133-
class=property>flex-item-align</code></a>&rsquo; of &lsquo;<a
2134-
href="#flex-align-baseline"><code
2135-
class=property>baseline</code></a>&rsquo;. Find the maximum of the
2136-
distances from their baseline to the cross-start edge of their margin
2137-
box, and the maximum of the distances from their baseline to the
2138-
cross-end edge of their margin box. Sum these two values.
2139-
2140-
<li>For remaining flexbox items, find the maximum of the cross sizes of
2141-
their margin boxes.
2142-
2143-
<li>The cross size of the flexbox line is the larger of the numbers
2120+
<li> Collect all the flexbox items whose inline axis is parallel to the
2121+
main axis and whose &lsquo;<a href="#flex-item-align"><code
2122+
class=property>flex-item-align</code></a>&rsquo; is &lsquo;<a
2123+
href="#flex-align-baseline"><code class=css>baseline</code></a>&rsquo;.
2124+
Find the largest of the distances between each item's baseline and its
2125+
hypothetical outer cross-start edge, and the largest of the distances
2126+
between each item's baseline and its hypothetical outer cross-end edge,
2127+
and sum these two values.
2128+
2129+
<li> Among all the items not collected by the previous step, find the
2130+
largest hypothetical outer cross-size.
2131+
2132+
<li> The cross-size of the flexbox line is the larger of the numbers
21442133
found in the previous two steps.
2145-
2146-
<li>If the flexbox is multi-line, has a definite cross size, &lsquo;<a
2147-
href="#flex-line-pack0"><code
2148-
class=property>flex-line-pack</code></a>&rsquo; is set to &lsquo;<a
2149-
href="#flex-line-pack-stretch"><code
2150-
class=css>stretch</code></a>&rsquo; and sum of cross size of all lines
2151-
is less than cross size of content box, increase cross size of each
2152-
line by equal amount to exactly match the cross size of content box.
2153-
</ol>
2154-
2155-
<li>If the flexbox doesn't have a definite cross size, the cross size of
2156-
its content box is the sum of the cross sizes of all of its lines.
2157-
2158-
<li>
2159-
<p>Determine the final cross size of each flexbox item.
2160-
2161-
<ol>
2162-
<li>If a flexbox item has &lsquo;<code
2163-
class=css>flex-item-align:stretch</code>&rsquo; and its preferred cross
2164-
size is &lsquo;<code class=css>auto</code>&rsquo; and its margin-box
2165-
cross size is smaller than cross-size of its flexbox line, its final
2166-
cross size is set so that its margin-box cross size is equal to
2167-
cross-size of its flexbox line.
2168-
2169-
<li>For all other flexbox items, its final cross size is its
2170-
hypothetical cross size.
2171-
2172-
<li>If the resulting cross size of any item conflicts with &lsquo;<code
2173-
class=property>min-width</code>&rsquo;, &lsquo;<code
2174-
class=property>max-width</code>&rsquo;, &lsquo;<code
2175-
class=property>min-height</code>&rsquo; or &lsquo;<code
2176-
class=property>max-height</code>&rsquo;, correct the result to comply
2177-
with the restrictions.
21782134
</ol>
21792135

2180-
<li>Resolve &lsquo;<code class=css>auto</code>&rsquo; margins on cross
2181-
axis. For each flexbox item, if its margin box cross size is smaller than
2182-
cross size of its line and it has any margins in cross direction set to
2183-
&lsquo;<code class=css>auto</code>&rsquo;, distribute the difference
2184-
equally to the auto margins.
2136+
<p> If the flexbox has a <a href="#definite0"><i>definite</i></a> cross
2137+
size, &lsquo;<a href="#flex-line-pack0"><code
2138+
class=property>flex-line-pack</code></a>&rsquo; is &lsquo;<a
2139+
href="#flex-line-pack-stretch"><code
2140+
class=css>stretch</code></a>&rsquo;, and the sum of the flexbox lines'
2141+
cross sizes is less than the flexbox's inner cross size, increase the
2142+
cross size of each flexbox line by equal amounts such that the sum of
2143+
their cross sizes exactly equals the flexbox's inner cross size.
2144+
2145+
<li> Resolve cross axis &lsquo;<code class=css>auto</code>&rsquo; margins.
2146+
If a flexbox item has &lsquo;<code class=css>auto</code>&rsquo; cross
2147+
axis margins, and its outer cross size (treating those &lsquo;<code
2148+
class=css>auto</code>&rsquo; margins as zero) is less than the cross size
2149+
of its flexbox line, distribute the difference in those sizes equally to
2150+
the &lsquo;<code class=css>auto</code>&rsquo; margins.
2151+
2152+
<li> Determine the used cross size of each flexbox item.
2153+
<p> If a flexbox item has &lsquo;<code class=css>flex-item-align:
2154+
stretch</code>&rsquo; and its cross size property is &lsquo;<code
2155+
class=css>auto</code>&rsquo;, the used outer cross size is the cross
2156+
size of its flexbox line, clamped by its min and max cross size
2157+
properties.
2158+
2159+
<p> Otherwise, the used cross size is the item's hypothetical cross size.
2160+
21852161

2186-
<li>For each flexbox line, align the flexbox items per &lsquo;<a
2162+
<li> Align all flexbox items along the cross axis per &lsquo;<a
21872163
href="#flex-item-align"><code
21882164
class=property>flex-item-align</code></a>&rsquo;.
21892165

2190-
<li>Align the flexbox lines per &lsquo;<a href="#flex-line-pack0"><code
2191-
class=property>flex-line-pack</code></a>&rsquo;. The leftover free-space
2192-
is calculated by subtracting the sum of the flexbox line's cross sizes
2193-
from the cross size of the flexbox's content box.
2166+
<li> Determine the flexbox's used cross size.
2167+
<ul>
2168+
<li> If the cross size property is a <a
2169+
href="#definite0"><i>definite</i></a> size, use that.
2170+
2171+
<li> Otherwise, use the sum of the flexbox lines' cross sizes.
2172+
</ul>
21942173

2195-
<li>Layout all items again in their final size and position.
2196-
Implementations can determine when this step is needed and how it can be
2197-
optimized, but for precise results it has to be assumed that this step is
2198-
performed.
2174+
<li> Align all flexbox lines per &lsquo;<a href="#flex-line-pack0"><code
2175+
class=property>flex-line-pack</code></a>&rsquo;.
21992176
</ol>
22002177

2201-
<p>To <dfn id=resolve-the-flexible-lengths>resolve the flexible
2202-
lengths</dfn> of the items within a flexbox line:
2178+
<h3 id=resolve-flexible-lengths><span class=secno>9.1. </span> Resolving
2179+
Flexible Lengths</h3>
2180+
2181+
<p> To resolve the flexible lengths of the items within a flexbox line:
22032182

22042183
<ol>
22052184
<li> Determine sign of flexibility
@@ -2950,7 +2929,7 @@ <h2 class=no-num id=index>Index</h2>
29502929
title=cross-start><strong>2.</strong></a>
29512930

29522931
<li>definite, <a href="#definite" title=definite><strong>9.</strong></a>,
2953-
<a href="#definite0" title=definite><strong>9.</strong></a>
2932+
<a href="#definite0" title=definite><strong>9.1.</strong></a>
29542933

29552934
<li>distribute, <a href="#flex-line-pack-distribute"
29562935
title=distribute><strong>8.4.</strong></a>, <a
@@ -3055,9 +3034,6 @@ <h2 class=no-num id=index>Index</h2>
30553034
<li>renderer, <a href="#renderer"
30563035
title=renderer><strong>12.2.</strong></a>
30573036

3058-
<li>resolve the flexible lengths, <a href="#resolve-the-flexible-lengths"
3059-
title="resolve the flexible lengths"><strong>9.</strong></a>
3060-
30613037
<li>row, <a href="#flex-flow-row" title=row><strong>6.1.</strong></a>
30623038

30633039
<li>row-reverse, <a href="#flex-flow-row-reverse"

‎css3-flexbox/Overview.src.html‎

Lines changed: 82 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1133,73 +1133,99 @@ <h2 id='layout-algorithm'>
11331133
Are flexboxes fill-available or fit-content by default?
11341134
Or are they really shrink-wrap, such that we need to adjust the main size here, now that we know the length of the longest line?
11351135

1136-
<li>For each flexbox line,
1137-
<ol>
1138-
<li><i>Resolve the flexible lengths</i> of the items contained within it. All flexbox items now have a final main size. Update each item's hypothetical cross size based on this main size.</li>
1139-
1140-
<li>Calculate the leftover free-space by subtracting the sum of the
1141-
margin-box main sizes of the items on the line from the main size of the flexbox's content box.</li>
1142-
<li>Resolve ''auto'' margins on main axis:<ol>
1143-
<li>If leftover free-space is positive and any items on this
1144-
line have at least one main-axis margin set to ''auto'',
1145-
distribute the leftover free-space equally to these margins.</li>
1146-
<li>Otherwise, any main-axis ''auto''
1147-
margins on items in this line are set to zero.</li>
1148-
</ol>
1149-
</li>
1150-
<li>
1151-
Align the items along the main axis per 'flex-pack'.
1152-
</li>
1153-
</ol>
1154-
</li>
1136+
<li>
1137+
<a href='#resolve-flexible-lengths'>Resolve the flexible lengths</a> of all the flexbox items to find their used main size.
1138+
Determine their hypothetical cross size from this main size.
1139+
1140+
<li>
1141+
Distribute any remaining free space.
1142+
For each flexbox line:
11551143

1156-
<li>Calculate the cross size of each flexbox line. For each flexbox
1157-
line:
11581144
<ol>
1159-
<li>If the flexbox is single-line and has a definite cross size, the single flexbox line's cross size is the cross size of the flexbox's content box. End this step of the algorithm.</li>
1145+
<li>
1146+
If the remaining free space is positive
1147+
and at least one main-axis margin on this line is ''auto'',
1148+
distribute the free space equally among these margins.
1149+
Otherwise, set all ''auto'' margins to zero.
1150+
1151+
<li>
1152+
Align the items along the main axis per 'flex-pack'.
1153+
</ol>
11601154

1161-
<li>If main axis is parallel to inline axis, collect all the flexbox items with a 'flex-item-align' of 'baseline'. Find the maximum of the distances from their baseline to the cross-start edge of their margin box, and the maximum of the distances from their baseline to the cross-end edge of their margin box. Sum these two values.</li>
1155+
<li>
1156+
Calculate the cross size of each flexbox line.
1157+
For each flexbox line:
1158+
1159+
<ol>
1160+
<li>
1161+
Collect all the flexbox items whose inline axis is parallel to the main axis
1162+
and whose 'flex-item-align' is ''baseline''.
1163+
Find the largest of the distances between each item's baseline and its hypothetical outer cross-start edge,
1164+
and the largest of the distances between each item's baseline and its hypothetical outer cross-end edge,
1165+
and sum these two values.
11621166

1163-
<li>For remaining flexbox items, find the maximum of the cross sizes of their margin boxes.
1167+
<li>
1168+
Among all the items not collected by the previous step,
1169+
find the largest hypothetical outer cross-size.
11641170

1165-
<li>The cross size of the flexbox line is the larger of the numbers found in the previous two steps.</li>
1166-
<li>If the flexbox is multi-line, has a definite cross size,
1167-
'flex-line-pack' is set to ''stretch'' and sum of cross size of
1168-
all lines is less than cross size of content box, increase cross
1169-
size of each line by equal amount to exactly match the cross
1170-
size of content box.</li>
1171+
<li>
1172+
The cross-size of the flexbox line is the larger of the numbers found in the previous two steps.
11711173
</ol>
1172-
</li>
11731174

1174-
<li>If the flexbox doesn't have a definite cross size, the cross size of its content box is the sum of the cross sizes of all of its lines.</li>
1175+
<p>
1176+
If the flexbox has a <i>definite</i> cross size,
1177+
'flex-line-pack' is ''stretch'',
1178+
and the sum of the flexbox lines' cross sizes is less than the flexbox's inner cross size,
1179+
increase the cross size of each flexbox line by equal amounts
1180+
such that the sum of their cross sizes exactly equals the flexbox's inner cross size.
11751181

11761182
<li>
1177-
<p>Determine the final cross size of each flexbox item.
1178-
<ol>
1179-
<li>If a flexbox item has ''flex-item-align:stretch'' and its
1180-
preferred cross size is ''auto'' and its margin-box cross size is
1181-
smaller than cross-size of its flexbox line, its final cross size is
1182-
set so that its margin-box cross size is equal to cross-size of its flexbox line.
1183-
<li>For all other flexbox items, its final cross size is its hypothetical cross size.
1184-
</li>
1185-
<li>If the resulting cross size of any item conflicts with 'min-width', 'max-width', 'min-height' or
1186-
'max-height', correct the result to comply with the restrictions.</li>
1187-
</ol>
1188-
</li>
1189-
<li>Resolve ''auto'' margins on cross axis. For each flexbox item, if its
1190-
margin box cross size is smaller than cross size of its line and it has
1191-
any margins in cross direction set to ''auto'', distribute the difference
1192-
equally to the auto margins. </li>
1193-
<li>For each flexbox line, align the flexbox items per 'flex-item-align'.</li>
1194-
1195-
<li>Align the flexbox lines per 'flex-line-pack'. The leftover free-space is calculated by subtracting the sum of the flexbox line's cross sizes from the cross size of the flexbox's content box.</li>
1196-
<li>Layout all items again in their final size and position.
1197-
Implementations can determine when this step is needed and how it can be
1198-
optimized, but for precise results it has to be assumed that this step
1199-
is performed.</li>
1183+
Resolve cross axis ''auto'' margins.
1184+
If a flexbox item has ''auto'' cross axis margins,
1185+
and its outer cross size
1186+
(treating those ''auto'' margins as zero)
1187+
is less than the cross size of its flexbox line,
1188+
distribute the difference in those sizes equally
1189+
to the ''auto'' margins.
1190+
1191+
<li>
1192+
Determine the used cross size of each flexbox item.
1193+
1194+
<p>
1195+
If a flexbox item has ''flex-item-align: stretch''
1196+
and its cross size property is ''auto'',
1197+
the used outer cross size is the cross size of its flexbox line,
1198+
clamped by its min and max cross size properties.
1199+
1200+
<p>
1201+
Otherwise,
1202+
the used cross size is the item's hypothetical cross size.
1203+
1204+
<li>
1205+
Align all flexbox items along the cross axis per 'flex-item-align'.
1206+
1207+
<li>
1208+
Determine the flexbox's used cross size.
1209+
1210+
<ul>
1211+
<li>
1212+
If the cross size property is a <i>definite</i> size,
1213+
use that.
1214+
1215+
<li>
1216+
Otherwise,
1217+
use the sum of the flexbox lines' cross sizes.
1218+
</ul>
1219+
1220+
<li>
1221+
Align all flexbox lines per 'flex-line-pack'.
12001222
</ol>
12011223

1202-
<p>To <dfn>resolve the flexible lengths</dfn> of the items within a flexbox line:</p>
1224+
<h3 id='resolve-flexible-lengths'>
1225+
Resolving Flexible Lengths</h3>
1226+
1227+
<p>
1228+
To resolve the flexible lengths of the items within a flexbox line:
12031229

12041230
<ol>
12051231
<li>

0 commit comments

Comments
 (0)