[css-grid-1][css-flexbox-1] Add explanation of flex values <1. Fixes … · w3c/csswg-drafts@cfdc4a2 (original) (raw)

`@@ -1440,7 +1440,13 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop

1440

1441

` A non-negative dimension with the unit ''fr'' specifying the track's flex factor.

1442

` Each <>-sized track takes a share of the remaining space in proportion to its flex factor.

1443

See Flexible Lengths for more details.

1443

For example, given a track listing of ''1fr 2fr'',

1444

the tracks will take up ⅓ and ⅔ of the leftover space, respectively.

1445

See [[#fr-unit]] for more details.

1446

+

1447

Note: If the sum of the flex factors is less than 1,

1448

they'll take up only a corresponding fraction of the leftover space,

1449

rather than expanding to fill the entire thing.

1444

1450

1445

1451

` When appearing outside a ''minmax()'' notation,

1446

1452

` implies an automatic minimum (i.e. ''minmax(auto, <>)'').

`@@ -1719,25 +1725,53 @@ Flexible Lengths: the ''fr'' unit

1719

1725

` which represents a fraction of the leftover space in the grid container.

1720

1726

` Tracks sized with ''fr'' units are called flexible tracks

1721

1727

` as they flex in response to leftover space

1722

similar to how flex items fill space in a flex container.

1723

-

1724

Note: <> values are not <>s

1725

(nor are they compatible with <>s, like some <> values),

1726

so they cannot be represented in or combined with other unit types in ''calc()'' expressions.

1728

similar to how flex items with a zero base size fill space in a flex container.

1727

1729

1728

1730

` The distribution of leftover space occurs after all non-flexible track sizing functions have reached their maximum.

1729

1731

` The total size of such rows or columns is subtracted from the available space, yielding the leftover space,

1730

1732

` which is then divided among the flex-sized rows and columns in proportion to their flex factor.

1731

1733

1732

Note: Flexible lengths in a track list work similarly to flexible lengths with a zero base size in [[CSS-FLEXBOX-1]].

1733

-

1734

` Each column or row's share of the leftover space can be computed as the column or row's

1735

`<flex> * <leftover space> / <sum of all flex factors>.

1736

1737

Note: If the sum of the flex factors is less than 1,

1738

they'll take up only a corresponding fraction of the leftover space,

1739

rather than expanding to fill the entire thing.

1740

This is similar to how Flexbox [[CSS-FLEXBOX-1]] acts when the sum of the 'flex' values is less than 1.

1737

1738

<> values between 0fr and 1fr have a somewhat special behavior:

1739

when the sum of the flex factors is less than 1,

1740

they will take up less than 100% of the leftover space.

1741

+

1742

A track’s <> value

1743

is effectively a request for some proportion of the leftover space,

1744

with ''1fr'' meaning “100% of the leftover space”;

1745

then if the tracks in that axis are requesting more than 100% in total,

1746

the requests are rebalanced to keep the same ratio but use up exactly 100% of it.

1747

However, if the tracks request less than the full amount

1748

(such as three tracks that are each ''.25fr'')

1749

then they'll each get exactly what they request

1750

(25% of the leftover space to each,

1751

with the final 25% left unfilled).

1752

See [[#algo-flex-tracks]] for the exact details

1753

of how leftover space is distributed.

1754

+

1755

This pattern is required for continuous behavior as ''fr'' values approach zero

1756

(which means the tracks wants none of the leftover space).

1757

Without this, a ''1fr'' track would take all of the leftover space;

1758

but so would a ''0.1fr'' track,

1759

and a ''0.01fr'' track,

1760

etc.,

1761

until finally the value is small enough to underflow to zero

1762

and the track suddenly takes up none of the leftover space.

1763

With this behavior,

1764

the track instead gradually takes less of the leftover space

1765

as its flex factor shrinks below ''1fr'',

1766

smoothly transitioning to taking none of the leftover space at zero.

1767

+

1768

Unless this “partial fill” behavior is specifically what's desired,

1769

authors should stick to values ≥ 1;

1770

for example, using ''1fr'' and ''2fr'' is usually better

1771

than using ''.33fr'' and ''.67fr'',

1772

as they're more likely to behave as intended

1773

if tracks are added or removed.

1774

1741

1775

1742

1776

` When the available space is infinite

1743

1777

` (which happens when the grid container’s width or height is indefinite),

`@@ -1749,6 +1783,10 @@ Flexible Lengths: the ''fr'' unit

1749

1783

` The maximum of those is used as the resolved ''1fr'' length (the flex fraction),

1750

1784

` which is then multiplied by each grid track’s flex factor to determine its final size.

1751

1785

1786

Note: <> values are not <>s

1787

(nor are they compatible with <>s, like some <> values),

1788

so they cannot be represented in or combined with other unit types in ''calc()'' expressions.

1789

+

1752

1790

`<!--

1753

1791

`████████ ████████ ██████ ███████ ██ ██ ██ ████████ ████████

1754

1792

`██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██