Skip to content

Commit 579e489

Browse files
tabatkinstabatkins
committed
Update flex distribution algo.
1 parent f09512b commit 579e489

2 files changed

Lines changed: 72 additions & 102 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 33 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,10 @@ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 24 April 2012</h2>
5656

5757
<dt>Previous versions:
5858

59+
<dd><a
60+
href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/</a>
61+
62+
5963
<dd><a
6064
href="http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/">http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</a>
6165

@@ -2074,7 +2078,7 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
20742078
class=css>fit-content</code>&rsquo;.
20752079

20762080
<li> Otherwise, if the item has a <a
2077-
href="#definite0"><i>definite</i></a> preferred size, that's the
2081+
href="#definite"><i>definite</i></a> preferred size, that's the
20782082
hypothetical size.
20792083

20802084
<li> Otherwise, the item is laid out and the hypothetical size is the
@@ -2139,7 +2143,7 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
21392143
found in the previous two steps.
21402144
</ol>
21412145

2142-
<p> If the flexbox has a <a href="#definite0"><i>definite</i></a> cross
2146+
<p> If the flexbox has a <a href="#definite"><i>definite</i></a> cross
21432147
size, &lsquo;<a href="#flex-line-pack0"><code
21442148
class=property>flex-line-pack</code></a>&rsquo; is &lsquo;<a
21452149
href="#flex-line-pack-stretch"><code
@@ -2170,7 +2174,7 @@ <h2 id=layout-algorithm><span class=secno>9. </span> Flexbox Layout
21702174
<li> <strong>Determine the flexbox's used cross size:</strong>
21712175
<ul>
21722176
<li> If the cross size property is a <a
2173-
href="#definite0"><i>definite</i></a> size, use that.
2177+
href="#definite"><i>definite</i></a> size, use that.
21742178

21752179
<li> Otherwise, use the sum of the flexbox lines' cross sizes.
21762180
</ul>
@@ -2186,68 +2190,46 @@ <h3 id=resolve-flexible-lengths><span class=secno>9.1. </span> Resolving
21862190
<p> To resolve the flexible lengths of the items within a flexbox line:
21872191

21882192
<ol>
2189-
<li> Determine sign of flexibility
2190-
<ol>
2191-
<li>Add margin-box hypothetical main sizes of all items, <i>adjusted for
2192-
min/max</i>.
2193-
2194-
<li>If the sum is less than available space, use positive flexibility,
2195-
otherwise use negative flexibility.
2196-
</ol>
2197-
2198-
<p>for the rest of the algorithm use flexibility with the sign determined
2199-
in this step</p>
2200-
2201-
<li>Reset all flexible sizes to their preferred size
2202-
2203-
<li>Find free space by subtracting sum of margin-box main sizes of flexbox
2204-
items from available space.
2205-
2206-
<li> Distribute free space proportional to flex:
2207-
<ol>
2208-
<li>If the free space is positive, but step 1 chose negative
2209-
flexibility, do nothing
2210-
2211-
<li>If the free space is negative, but step 1 chose positive
2212-
flexibility, do nothing
2213-
2214-
<li>Add a portion of free space to each flexible item, proportional to
2215-
item's flexibility
2216-
</ol>
2217-
2218-
<li> Fix min/max violations:
2219-
<ol>
2220-
<li>Adjust each flexible item for min/max.
2193+
<li> <strong>Determine the used flexibility.</strong> Sum the hypothetical
2194+
outer main sizes of all items on the line, clamped by their min and max
2195+
main size properties. If the sum is greater than the flexbox's inner main
2196+
size, use positive flexibility; otherwise, use negative flexibility.
2197+
2198+
<li> <strong>Calculate free space.</strong> Sum the hypothetical outer
2199+
main sizes of all items on the line (not clamping this time), and
2200+
subtract this from the flexbox's inner main size. This is the free space.
2201+
22212202

2222-
<li>If the size has changed, it is a violation.
2203+
<li> <strong>Distribute free space proportional to flexibility.</strong>
2204+
If the sign of the free space matches the sign of the flexibility,
2205+
distribute the free space to each flexible item's main size in proportion
2206+
to the item's flexibility.
22232207

2224-
<li>The violation may be positive (min violation) or negative (max
2225-
violation). Accumulate the difference.
2226-
</ol>
2208+
<li> <strong>Fix min/max violations.</strong> Clamp each item's main size
2209+
by its min and max main size properties. If the item's main size was made
2210+
smaller by this, it's a max violation. If the item's main size was made
2211+
larger by this, it's a min violation.
22272212

2228-
<li> If the sum of all violations is:
2213+
<li> The total violation is the sum of the differences between each
2214+
violating element's original size and its adjusted size. If the total
2215+
violation is:
22292216
<dl>
22302217
<dt>Zero
22312218

2232-
<dd>Exit the algorithm.
2219+
<dd> Exit the algorithm.
22332220

22342221
<dt>Positive
22352222

2236-
<dd>Freeze items with max violations, and return to step 2.
2223+
<dd> Freeze all the items with max violations, reset all other items to
2224+
their preferred size, and return to step 2.
22372225

22382226
<dt>Negative
22392227

2240-
<dd>Freeze items with min violations, and return to step 2.
2228+
<dd> Freeze all the items with min violations, reset all other items to
2229+
their preferred size, and return to step 2.
22412230
</dl>
22422231
</ol>
22432232

2244-
<p>For the purposes of this algorithm, measurements are considered <dfn
2245-
id=definite0>definite</dfn> if their precise value is known before the
2246-
start of the algorithm. For example, sizes in pixels or inches are always
2247-
definite; &lsquo;<code class=property>auto</code>&rsquo; and percent may
2248-
or may not be definite, which depends on how these values were handled
2249-
before this algorithm is applied.
2250-
22512233
<h2 id=pagination><span class=secno>10. </span> Page breaks in flexbox</h2>
22522234

22532235
<p>Flexboxes can break across pages between items, between lines of items
@@ -2933,8 +2915,7 @@ <h2 class=no-num id=index>Index</h2>
29332915
<li>cross-start, <a href="#cross-start"
29342916
title=cross-start><strong>2.</strong></a>
29352917

2936-
<li>definite, <a href="#definite" title=definite><strong>9.</strong></a>,
2937-
<a href="#definite0" title=definite><strong>9.1.</strong></a>
2918+
<li>definite, <a href="#definite" title=definite><strong>9.</strong></a>
29382919

29392920
<li>distribute, <a href="#flex-line-pack-distribute"
29402921
title=distribute><strong>8.4.</strong></a>, <a

‎css3-flexbox/Overview.src.html‎

Lines changed: 39 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ <h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS], [DATE]</h2>
3838
<dd><a href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
3939

4040
<dt>Previous versions:
41+
<dd><a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/</a>
4142
<dd><a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/">http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/</a>
4243
<dd><a href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</a>
4344
<dd><a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/</a>
@@ -1225,67 +1226,55 @@ <h3 id='resolve-flexible-lengths'>
12251226

12261227
<ol>
12271228
<li>
1228-
Determine sign of flexibility
1229-
1230-
<ol>
1231-
<li>Add margin-box hypothetical main sizes of all items, <i>adjusted for min/max</i>.
1232-
1233-
<li>If the sum is less than available space, use positive flexibility, otherwise use negative flexibility.</li>
1234-
</ol>
1235-
1236-
<p>for the rest of the algorithm use flexibility with the sign determined in this step</p>
1237-
</li>
1238-
1239-
<li>Reset all flexible sizes to their preferred size</li>
1240-
1241-
<li>Find free space by subtracting sum of margin-box main sizes of
1242-
flexbox items from available space.</li>
1229+
<strong>Determine the used flexibility.</strong>
1230+
Sum the hypothetical outer main sizes of all items on the line,
1231+
clamped by their min and max main size properties.
1232+
If the sum is greater than the flexbox's inner main size,
1233+
use positive flexibility;
1234+
otherwise, use negative flexibility.
12431235

12441236
<li>
1245-
Distribute free space proportional to flex:
1246-
1247-
<ol>
1248-
<li>If the free space is positive, but step 1 chose negative flexibility, do nothing</li>
1249-
1250-
<li>If the free space is negative, but step 1 chose positive flexibility, do nothing</li>
1237+
<strong>Calculate free space.</strong>
1238+
Sum the hypothetical outer main sizes of all items on the line
1239+
(not clamping this time),
1240+
and subtract this from the flexbox's inner main size.
1241+
This is the free space.
12511242

1252-
<li>Add a portion of free space to each flexible item,
1253-
proportional to item's flexibility</li>
1254-
</ol>
1255-
</li>
1243+
<li>
1244+
<strong>Distribute free space proportional to flexibility.</strong>
1245+
If the sign of the free space matches the sign of the flexibility,
1246+
distribute the free space to each flexible item's main size
1247+
in proportion to the item's flexibility.
12561248

12571249
<li>
1258-
Fix min/max violations:
1259-
1260-
<ol>
1261-
<li>Adjust each flexible item for min/max. </li>
1262-
1263-
<li>If the size has changed, it is a violation. </li>
1264-
1265-
<li>The violation may be positive (min violation) or negative (max violation). Accumulate the difference.</li>
1266-
</ol>
1267-
</li>
1250+
<strong>Fix min/max violations.</strong>
1251+
Clamp each item's main size by its min and max main size properties.
1252+
If the item's main size was made smaller by this, it's a max violation.
1253+
If the item's main size was made larger by this, it's a min violation.
12681254

12691255
<li>
1270-
If the sum of all violations is:
1256+
The total violation is the sum of the differences between
1257+
each violating element's original size and its adjusted size.
1258+
If the total violation is:
12711259

12721260
<dl>
1273-
<dt>Zero</dt>
1274-
<dd>Exit the algorithm.</dd>
1275-
1276-
<dt>Positive</dt>
1277-
<dd>Freeze items with max violations, and return to step 2.</dd>
1278-
1279-
<dt>Negative</dt>
1280-
<dd>Freeze items with min violations, and return to step 2.</dd>
1261+
<dt>Zero
1262+
<dd>
1263+
Exit the algorithm.
1264+
1265+
<dt>Positive
1266+
<dd>
1267+
Freeze all the items with max violations,
1268+
reset all other items to their preferred size,
1269+
and return to step 2.
1270+
1271+
<dt>Negative
1272+
<dd>
1273+
Freeze all the items with min violations,
1274+
reset all other items to their preferred size,
1275+
and return to step 2.
12811276
</dl>
1282-
</li>
12831277
</ol>
1284-
1285-
<p>For the purposes of this algorithm, measurements are considered <dfn>definite</dfn> if their precise value is known before the start of the algorithm.
1286-
For example, sizes in pixels or inches are always definite; 'auto' and percent may or may not be definite,
1287-
which depends on how these values were handled before this algorithm is
1288-
applied. </p>
12891278

12901279
<h2 id="pagination">
12911280
Page breaks in flexbox</h2>

0 commit comments

Comments
 (0)