Skip to content

Commit 2dd2740

Browse files
tabatkinstabatkins
committed
[css-flexbox] First attempt at rewriting the flex distribution to handle <1 values.
--HG-- extra : rebase_source : 6ae2c1fe5463112154778cde3476068c9f6ba665
1 parent bab3233 commit 2dd2740

2 files changed

Lines changed: 159 additions & 132 deletions

File tree

‎css-flexbox/Overview.html‎

Lines changed: 81 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,7 @@
4545
list-style: none;
4646
}
4747
</style>
48-
</head>
49-
<body class=h-entry>
50-
<style scoped>
48+
<style>
5149
code.one-line { white-space: pre; }
5250
.code-and-figure {
5351
display: table;
@@ -237,6 +235,8 @@
237235
.size { color: hsl(120,80%,30%); }
238236
</style>
239237

238+
</head>
239+
<body class=h-entry>
240240
<div class=head>
241241
<p data-fill-with=logo><a class=logo href=http://www.w3.org/>
242242
<img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72>
@@ -2312,7 +2312,7 @@ <h3 class="heading settled heading" data-level=9.7 id=resolve-flexible-lengths><
23122312
<li>
23132313
<strong>Determine the used flex factor.</strong>
23142314
Sum the outer <a data-link-type=dfn href=#hypothetical-main-size title="hypothetical main sizes">hypothetical main sizes</a> of all items on the line.
2315-
If the sum is less than the flex container’s inner main size,
2315+
If the sum is less than or equal to the flex container’s inner main size,
23162316
use the <a data-link-type=dfn href=#flex-grow-factor title="flex grow factor">flex grow factor</a> for the rest of this algorithm;
23172317
otherwise, use the <a data-link-type=dfn href=#flex-shrink-factor title="flex shrink factor">flex shrink factor</a>.
23182318

@@ -2322,79 +2322,93 @@ <h3 class="heading settled heading" data-level=9.7 id=resolve-flexible-lengths><
23222322
set their used main size
23232323
to their <a data-link-type=dfn href=#hypothetical-main-size title="hypothetical main size">hypothetical main size</a>.
23242324

2325-
<li>
2326-
<strong>Check that you can distribute any space.</strong>
2327-
If all the flex items on the line are either frozen
2328-
or have a flex factor of zero,
2329-
exit the algorithm.
2330-
23312325
<li>
23322326
<strong>Calculate free space.</strong>
23332327
Sum the outer <a data-link-type=dfn href=#flex-base-size title="flex base sizes">flex base sizes</a> of all items on the line,
23342328
and subtract this from the flex container’s inner main size.
23352329
This is the free space.
23362330

23372331
<li>
2338-
<strong>Distribute free space proportional to the flex factors.</strong>
2339-
If the sign of the free space is positive and the algorithm is using the <a data-link-type=dfn href=#flex-grow-factor title="flex grow factor">flex grow factor</a>,
2340-
or if the sign of the free space is negative and the algorithm is using the <a data-link-type=dfn href=#flex-shrink-factor title="flex shrink factor">flex shrink factor</a>,
2341-
distribute the free space to each flexible item’s main size
2342-
in proportion to the item’s flex factor:
2343-
2344-
<dl>
2345-
<dt>If the free space is positive</dt>
2346-
<dd>
2347-
Find the ratio of the item’s <a data-link-type=dfn href=#flex-grow-factor title="flex grow factor">flex grow factor</a>
2348-
to the sum of the <a data-link-type=dfn href=#flex-grow-factor title="flex grow factors">flex grow factors</a> of all items on the line.
2349-
Set the item’s main size
2350-
to its <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a>
2351-
plus a fraction of the free space
2352-
proportional to the ratio.
2353-
2354-
<dt>If the free space is negative</dt>
2355-
<dd>
2356-
For every item on the line,
2357-
multiply its <a data-link-type=dfn href=#flex-shrink-factor title="flex shrink factor">flex shrink factor</a>
2358-
by its outer <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a>,
2359-
and note this as its <dfn data-dfn-type=dfn data-noexport="" id=scaled-flex-shrink-factor>scaled flex shrink factor<a class=self-link href=#scaled-flex-shrink-factor></a></dfn>.
2360-
Find the ratio of the item’s <a data-link-type=dfn href=#scaled-flex-shrink-factor title="scaled flex shrink factor">scaled flex shrink factor</a>
2361-
to the sum of the <a data-link-type=dfn href=#scaled-flex-shrink-factor title="scaled flex shrink factors">scaled flex shrink factors</a> of all items on the line.
2362-
Set the item’s main size
2363-
to its <a data-link-type=dfn href=#flex-base-size title="flex base size">flex base size</a>
2364-
minus a fraction of the absolute value of the free space
2365-
proportional to the ratio.
2366-
<span class=note>Note this may result in a negative inner main size;
2367-
it will be corrected in the next step.</span>
2368-
</dl>
2332+
<strong>Calculate desired free space.</strong>
2333+
If the free space is zero or positive,
2334+
then for each <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> on the line,
2335+
its <var>originally desired free space</var>
2336+
is the free space multiplied by the flex grow factor.
2337+
2338+
<p> Otherwise, if the free space is negative,
2339+
then first sum the flex shrink factors of all the flex items on the line.
2340+
If this number is greater than 1, set it to 1.
2341+
Let this result be the <var>scaled flex factor sum</var>.
2342+
For each flex item, multiply its flex shrink factor by its used based size.
2343+
Then, renormalize each flex shrink factor so that their sum is the <var>scaled flex factor sum</var>.
2344+
Then, multiple the flex shrink factor by the free space,
2345+
and let the result be the <var>originally desired free space</var>.
23692346

23702347
<li>
2371-
<strong>Fix min/max violations.</strong>
2372-
Clamp each item’s main size by its min and max main size properties.
2373-
If the item’s main size was made smaller by this, it’s a max violation.
2374-
If the item’s main size was made larger by this, it’s a min violation.
2348+
Loop:
23752349

2376-
<li>
2377-
The total violation is the sum of the adjustments from the previous step
2378-
(<code><var>clamped size</var> - <var>unclamped size</var></code>).
2379-
If the total violation is:
2380-
2381-
<dl>
2382-
<dt>Zero
2383-
<dd>
2384-
Exit the algorithm.
2385-
2386-
<dt>Positive
2387-
<dd>
2388-
Freeze all the items with min violations,
2389-
reset all other items to their size upon entering this algorithm,
2390-
and return to step 2 of this algorithm.
2391-
2392-
<dt>Negative
2393-
<dd>
2394-
Freeze all the items with max violations,
2395-
reset all other items to their size upon entering this algorithm,
2396-
and return to step 2 of this algorithm.
2397-
</dl>
2350+
<ol>
2351+
<li>
2352+
<strong>Check that you can distribute any space.</strong>
2353+
If all the flex items on the line are either frozen
2354+
or have a flex factor of zero,
2355+
exit the algorithm.
2356+
2357+
<li>
2358+
<strong>Reset desired free space.</strong>
2359+
For each non-frozen flex item on the line,
2360+
set its <var>desired free space</var>
2361+
to its <var>originally desired free space</var>.
2362+
2363+
<li>
2364+
<strong>Normalize desired free space if necessary.</strong>
2365+
If the free space is positive,
2366+
and the sum of the <var>desired free spaces</var> of all the flex items on the line
2367+
is greater than the free space,
2368+
normalize all the <var>desired free spaces</var> so that they sum exactly to the free space
2369+
while maintaining their magnitudes relative to each other.
2370+
2371+
<p> Otherwise, if the free space is negative,
2372+
and the sum of the <var>desired free spaces</var> of all the flex items on the line
2373+
is less than the free space,
2374+
normalize all the <var>desired free spaces</var> so that they sum exactly to the free space
2375+
while maintaining their magnitudes relative to each other.
2376+
2377+
<li>
2378+
<strong>Adjust main size.</strong>
2379+
Add each item’s <var>desired free space</var> to its <a data-link-type=dfn href=#hypothetical-main-size title="hypothetical main size">hypothetical main size</a>.
2380+
2381+
<p class=note> Note: This may result in a negative main size temporarily.
2382+
2383+
<li>
2384+
<strong>Fix min/max violations.</strong>
2385+
Clamp each item’s main size by its min and max main size properties.
2386+
If the item’s main size was made smaller by this, it’s a max violation.
2387+
If the item’s main size was made larger by this, it’s a min violation.
2388+
2389+
<li>
2390+
The total violation is the sum of the adjustments from the previous step
2391+
(<code><var>clamped size</var> - <var>unclamped size</var></code>).
2392+
If the total violation is:
2393+
2394+
<dl>
2395+
<dt>Zero
2396+
<dd>
2397+
Exit the algorithm.
2398+
2399+
<dt>Positive
2400+
<dd>
2401+
Freeze all the items with min violations,
2402+
reset all other items to their size upon entering this algorithm,
2403+
and return to the start of this loop.
2404+
2405+
<dt>Negative
2406+
<dd>
2407+
Freeze all the items with max violations,
2408+
reset all other items to their size upon entering this algorithm,
2409+
and return to the start of this loop.
2410+
</dl>
2411+
</ol>
23982412
</ol>
23992413

24002414
<h3 class="heading settled heading" data-level=9.8 id=intrinsic-sizes><span class=secno>9.8 </span><span class=content>
@@ -3028,7 +3042,6 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
30283042
<li>participates in baseline alignment, <a href=#baseline-participation title="section 8.3">8.3</a>
30293043
<li>row, <a href=#valuedef-row title="section 5.1">5.1</a>
30303044
<li>row-reverse, <a href=#valuedef-row-reverse title="section 5.1">5.1</a>
3031-
<li>scaled flex shrink factor, <a href=#scaled-flex-shrink-factor title="section 9.7">9.7</a>
30323045
<li>single-line, <a href=#single-line title="section 6">6</a>
30333046
<li>space-around<ul><li>value for justify-content, <a href=#valuedef-space-around0 title="section 8.2">8.2</a>
30343047
<li>value for align-content, <a href=#valuedef-space-around title="section 8.4">8.4</a>

‎css-flexbox/Overview.src.html‎

Lines changed: 78 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -2302,7 +2302,7 @@ <h3 id='resolve-flexible-lengths'>
23022302
<li>
23032303
<strong>Determine the used flex factor.</strong>
23042304
Sum the outer <i>hypothetical main sizes</i> of all items on the line.
2305-
If the sum is less than the flex container's inner main size,
2305+
If the sum is less than or equal to the flex container's inner main size,
23062306
use the <i>flex grow factor</i> for the rest of this algorithm;
23072307
otherwise, use the <i>flex shrink factor</i>.
23082308

@@ -2312,79 +2312,93 @@ <h3 id='resolve-flexible-lengths'>
23122312
set their used main size
23132313
to their <i>hypothetical main size</i>.
23142314

2315-
<li>
2316-
<strong>Check that you can distribute any space.</strong>
2317-
If all the flex items on the line are either frozen
2318-
or have a flex factor of zero,
2319-
exit the algorithm.
2320-
23212315
<li>
23222316
<strong>Calculate free space.</strong>
23232317
Sum the outer <i>flex base sizes</i> of all items on the line,
23242318
and subtract this from the flex container's inner main size.
23252319
This is the free space.
23262320

23272321
<li>
2328-
<strong>Distribute free space proportional to the flex factors.</strong>
2329-
If the sign of the free space is positive and the algorithm is using the <i>flex grow factor</i>,
2330-
or if the sign of the free space is negative and the algorithm is using the <i>flex shrink factor</i>,
2331-
distribute the free space to each flexible item's main size
2332-
in proportion to the item's flex factor:
2333-
2334-
<dl>
2335-
<dt>If the free space is positive</dt>
2336-
<dd>
2337-
Find the ratio of the item's <i>flex grow factor</i>
2338-
to the sum of the <i>flex grow factors</i> of all items on the line.
2339-
Set the item's main size
2340-
to its <i>flex base size</i>
2341-
plus a fraction of the free space
2342-
proportional to the ratio.
2343-
2344-
<dt>If the free space is negative</dt>
2345-
<dd>
2346-
For every item on the line,
2347-
multiply its <i>flex shrink factor</i>
2348-
by its outer <i>flex base size</i>,
2349-
and note this as its <dfn>scaled flex shrink factor</dfn>.
2350-
Find the ratio of the item's <i>scaled flex shrink factor</i>
2351-
to the sum of the <i>scaled flex shrink factors</i> of all items on the line.
2352-
Set the item's main size
2353-
to its <i>flex base size</i>
2354-
minus a fraction of the absolute value of the free space
2355-
proportional to the ratio.
2356-
<span class="note">Note this may result in a negative inner main size;
2357-
it will be corrected in the next step.</span>
2358-
</dl>
2322+
<strong>Calculate desired free space.</strong>
2323+
If the free space is zero or positive,
2324+
then for each <a>flex item</a> on the line,
2325+
its <var>originally desired free space</var>
2326+
is the free space multiplied by the flex grow factor.
2327+
2328+
Otherwise, if the free space is negative,
2329+
then first sum the flex shrink factors of all the flex items on the line.
2330+
If this number is greater than 1, set it to 1.
2331+
Let this result be the <var>scaled flex factor sum</var>.
2332+
For each flex item, multiply its flex shrink factor by its used based size.
2333+
Then, renormalize each flex shrink factor so that their sum is the <var>scaled flex factor sum</var>.
2334+
Then, multiple the flex shrink factor by the free space,
2335+
and let the result be the <var>originally desired free space</var>.
23592336

23602337
<li>
2361-
<strong>Fix min/max violations.</strong>
2362-
Clamp each item's main size by its min and max main size properties.
2363-
If the item's main size was made smaller by this, it's a max violation.
2364-
If the item's main size was made larger by this, it's a min violation.
2338+
Loop:
23652339

2366-
<li>
2367-
The total violation is the sum of the adjustments from the previous step
2368-
(<code><var>clamped size</var> - <var>unclamped size</var></code>).
2369-
If the total violation is:
2370-
2371-
<dl>
2372-
<dt>Zero
2373-
<dd>
2374-
Exit the algorithm.
2375-
2376-
<dt>Positive
2377-
<dd>
2378-
Freeze all the items with min violations,
2379-
reset all other items to their size upon entering this algorithm,
2380-
and return to step 2 of this algorithm.
2381-
2382-
<dt>Negative
2383-
<dd>
2384-
Freeze all the items with max violations,
2385-
reset all other items to their size upon entering this algorithm,
2386-
and return to step 2 of this algorithm.
2387-
</dl>
2340+
<ol>
2341+
<li>
2342+
<strong>Check that you can distribute any space.</strong>
2343+
If all the flex items on the line are either frozen
2344+
or have a flex factor of zero,
2345+
exit the algorithm.
2346+
2347+
<li>
2348+
<strong>Reset desired free space.</strong>
2349+
For each non-frozen flex item on the line,
2350+
set its <var>desired free space</var>
2351+
to its <var>originally desired free space</var>.
2352+
2353+
<li>
2354+
<strong>Normalize desired free space if necessary.</strong>
2355+
If the free space is positive,
2356+
and the sum of the <var>desired free spaces</var> of all the flex items on the line
2357+
is greater than the free space,
2358+
normalize all the <var>desired free spaces</var> so that they sum exactly to the free space
2359+
while maintaining their magnitudes relative to each other.
2360+
2361+
Otherwise, if the free space is negative,
2362+
and the sum of the <var>desired free spaces</var> of all the flex items on the line
2363+
is less than the free space,
2364+
normalize all the <var>desired free spaces</var> so that they sum exactly to the free space
2365+
while maintaining their magnitudes relative to each other.
2366+
2367+
<li>
2368+
<strong>Adjust main size.</strong>
2369+
Add each item's <var>desired free space</var> to its <a>hypothetical main size</a>.
2370+
2371+
Note: This may result in a negative main size temporarily.
2372+
2373+
<li>
2374+
<strong>Fix min/max violations.</strong>
2375+
Clamp each item's main size by its min and max main size properties.
2376+
If the item's main size was made smaller by this, it's a max violation.
2377+
If the item's main size was made larger by this, it's a min violation.
2378+
2379+
<li>
2380+
The total violation is the sum of the adjustments from the previous step
2381+
(<code><var>clamped size</var> - <var>unclamped size</var></code>).
2382+
If the total violation is:
2383+
2384+
<dl>
2385+
<dt>Zero
2386+
<dd>
2387+
Exit the algorithm.
2388+
2389+
<dt>Positive
2390+
<dd>
2391+
Freeze all the items with min violations,
2392+
reset all other items to their size upon entering this algorithm,
2393+
and return to the start of this loop.
2394+
2395+
<dt>Negative
2396+
<dd>
2397+
Freeze all the items with max violations,
2398+
reset all other items to their size upon entering this algorithm,
2399+
and return to the start of this loop.
2400+
</dl>
2401+
</ol>
23882402
</ol>
23892403

23902404
<h3 id='intrinsic-sizes'>

0 commit comments

Comments
 (0)