Skip to content

Commit ba127d0

Browse files
SebastianZSebastianZ
committed
[css-values-4] Moved definition of <flex> to CSS Values 4
1 parent 349a54a commit ba127d0

File tree

4 files changed

+103
-115
lines changed

4 files changed

+103
-115
lines changed

‎css-borders-4/Overview.bs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ The 'border-clip' properties</h3>
336336
the border edge. The first part is visible, the second is invisible,
337337
the third part is visible, etc. Parts can be specified with lengths,
338338
percentages, or flexible lengths (expressed by the ''fr'' unit, as per
339-
[[CSS3GRID]]).
339+
[[css-values-4#fractions]]).
340340
The ''border-clip/normal'' value means
341341
that the border is not split, but shown normally.
342342

‎css-grid-1/Overview.bs

Lines changed: 16 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1542,11 +1542,11 @@ Track Sizes</h4>
15421542

15431543
<dt><dfn><<flex [0,∞]>></dfn>
15441544
<dd>
1545-
A non-negative dimension with the unit ''fr'' specifying the track's <dfn dfn noexport>flex factor</dfn>.
1545+
Specifies the track's <dfn dfn noexport>flex factor</dfn>.
15461546
Each <<flex>>-sized track takes a share of the remaining space in proportion to its <a>flex factor</a>.
15471547
For example, given a track listing of ''1fr 2fr'',
15481548
the tracks will take up ⅓ and ⅔ of the <a>leftover space</a>, respectively.
1549-
See [[#fr-unit]] for more details.
1549+
See [[#flexible-tracks]] for more details.
15501550

15511551
Note: If the sum of the <a>flex factors</a> is less than 1,
15521552
they'll take up only a corresponding fraction of the <a>leftover space</a>,
@@ -1850,22 +1850,19 @@ Interpolation/Combination of ''repeat()''</h5>
18501850
They otherwise combine <a lt=discrete>discretely</a>.
18511851

18521852
<!--
1853-
████████ ████████ ██ ██ ██ ██ ████ ████████
1854-
██ ██ ██ ██ ██ ███ ██ ██ ██
1855-
██ ██ ██ ██ ██ ████ ██ ██ ██
1856-
██████ ████████ ██ ██ ██ ██ ██ ██ ██
1857-
██ ██ ██ ██ ██ ██ ████ ██ ██
1858-
██ ██ ██ ██ ██ ██ ███ ██ ██
1859-
██ ██ ██ ███████ ██ ██ ████ ██
1853+
████████ ██ ████████ ██ ██ ████ ████████ ██ ████████
1854+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1855+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1856+
██████ ██ ██████ ███ ██ ████████ ██ ██████
1857+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1858+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1859+
██ ████████ ████████ ██ ██ ████ ████████ ████████ ████████
18601860
-->
18611861

1862-
<h4 id='fr-unit'>
1863-
Flexible Lengths: the ''fr'' unit</h4>
1862+
<h4 id='flexible-tracks'>
1863+
Flexible Tracks</h4>
18641864

1865-
A <dfn export>flexible length</dfn> or <dfn><<flex>></dfn> is a dimension
1866-
with the <dfn value for="<flex>" lt="fr|fr unit">fr</dfn> unit,
1867-
which represents a fraction of the <a>leftover space</a> in the <a>grid container</a>.
1868-
Tracks sized with ''fr'' units are called <dfn>flexible tracks</dfn>
1865+
Tracks sized using <<flex>> values are called <dfn>flexible tracks</dfn>
18691866
as they flex in response to <a>leftover space</a>
18701867
similar to how <a>flex items</a> with a zero base size fill space in a <a>flex container</a>.
18711868

@@ -1876,45 +1873,6 @@ Flexible Lengths: the ''fr'' unit</h4>
18761873
Each column or row's share of the <a>leftover space</a> can be computed as the column or row's
18771874
<code>&lt;flex> * &lt;leftover space> / &lt;sum of all <a>flex factors</a>&gt;</code>.
18781875

1879-
<details class=note>
1880-
<summary><<flex>> values between 0fr and 1fr have a somewhat special behavior:
1881-
when the sum of the flex factors is less than 1,
1882-
they will take up less than 100% of the leftover space.</summary>
1883-
1884-
A track’s <<flex>> value
1885-
is effectively a request for some proportion of the leftover space,
1886-
with ''1fr'' meaning “100% of the leftover space”;
1887-
then if the tracks in that axis are requesting more than 100% in total,
1888-
the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
1889-
However, if the tracks request <em>less</em> than the full amount
1890-
(such as three tracks that are each ''.25fr'')
1891-
then they'll each get exactly what they request
1892-
(25% of the leftover space to each,
1893-
with the final 25% left unfilled).
1894-
See [[#algo-flex-tracks]] for the exact details
1895-
of how leftover space is distributed.
1896-
1897-
This pattern is required for continuous behavior as ''fr'' values approach zero
1898-
(which means the tracks wants <em>none</em> of the leftover space).
1899-
Without this, a ''1fr'' track would take all of the leftover space;
1900-
but so would a ''0.1fr'' track,
1901-
and a ''0.01fr'' track,
1902-
etc.,
1903-
until finally the value is small enough to underflow to zero
1904-
and the track suddenly takes up none of the leftover space.
1905-
With this behavior,
1906-
the track instead gradually takes less of the leftover space
1907-
as its flex factor shrinks below ''1fr'',
1908-
smoothly transitioning to taking none of the leftover space at zero.
1909-
1910-
Unless this “partial fill” behavior is <em>specifically</em> what's desired,
1911-
authors should stick to values &ge; 1;
1912-
for example, using ''1fr'' and ''2fr'' is usually better
1913-
than using ''.33fr'' and ''.67fr'',
1914-
as they're more likely to behave as intended
1915-
if tracks are added or removed.
1916-
</details>
1917-
19181876
When the available space is infinite
19191877
(which happens when the <a>grid container</a>’s width or height is <a>indefinite</a>),
19201878
flex-sized <a>grid tracks</a> are sized to their contents while retaining their respective proportions.
@@ -1925,10 +1883,6 @@ Flexible Lengths: the ''fr'' unit</h4>
19251883
The maximum of those is used as the resolved ''1fr'' length (the <dfn>flex fraction</dfn>),
19261884
which is then multiplied by each <a>grid track</a>’s <a>flex factor</a> to determine its final size.
19271885

1928-
Note: <<flex>> values are not <<length>>s
1929-
(nor are they compatible with <<length>>s, like some <<percentage>> values),
1930-
so they cannot be represented in or combined with other unit types in ''calc()'' expressions.
1931-
19321886
<!--
19331887
██████ ███████ ██ ██ ████████ ██ ██ ████████ ████████ ████████
19341888
██ ██ ██ ██ ███ ███ ██ ██ ██ ██ ██ ██ ██ ██
@@ -4902,6 +4856,10 @@ Changes since the <a href="https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/">
49024856
instead use the <a>grid area</a> determined in [[#abspos-items]].</del>
49034857
</blockquote>
49044858

4859+
<li id="change-2020-fr-unit">
4860+
Moved the definition of <<flex>> to [[css-values-4#fractions]],
4861+
as other specs also make use of it.
4862+
(<a href="https://github.com/w3c/csswg-drafts/issues/8027">Issue 8027</a>)
49054863
</ul>
49064864

49074865
<h3 id="changes-202008">

‎css-grid-2/Overview.bs

Lines changed: 15 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1940,22 +1940,19 @@ Interpolation/Combination of ''repeat()''</h5>
19401940
They otherwise combine <a lt=discrete>discretely</a>.
19411941

19421942
<!--
1943-
████████ ████████ ██ ██ ██ ██ ████ ████████
1944-
██ ██ ██ ██ ██ ███ ██ ██ ██
1945-
██ ██ ██ ██ ██ ████ ██ ██ ██
1946-
██████ ████████ ██ ██ ██ ██ ██ ██ ██
1947-
██ ██ ██ ██ ██ ██ ████ ██ ██
1948-
██ ██ ██ ██ ██ ██ ███ ██ ██
1949-
██ ██ ██ ███████ ██ ██ ████ ██
1943+
████████ ██ ████████ ██ ██ ████ ████████ ██ ████████
1944+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1945+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1946+
██████ ██ ██████ ███ ██ ████████ ██ ██████
1947+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1948+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1949+
██ ████████ ████████ ██ ██ ████ ████████ ████████ ████████
19501950
-->
19511951

1952-
<h4 id='fr-unit'>
1953-
Flexible Lengths: the ''fr'' unit</h4>
1952+
<h4 id='flexible-tracks'>
1953+
Flexible Tracks</h4>
19541954

1955-
A <dfn export>flexible length</dfn> or <dfn><<flex>></dfn> is a dimension
1956-
with the <dfn value for="<flex>" lt="fr|fr unit">fr</dfn> unit,
1957-
which represents a fraction of the <a>leftover space</a> in the <a>grid container</a>.
1958-
Tracks sized with ''fr'' units are called <dfn>flexible tracks</dfn>
1955+
Tracks sized using <<flex>> values are called <dfn>flexible tracks</dfn>
19591956
as they flex in response to <a>leftover space</a>
19601957
similar to how <a>flex items</a> with a zero base size fill space in a <a>flex container</a>.
19611958

@@ -1966,45 +1963,6 @@ Flexible Lengths: the ''fr'' unit</h4>
19661963
Each column or row's share of the <a>leftover space</a> can be computed as the column or row's
19671964
<code>&lt;flex> * &lt;leftover space> / &lt;sum of all <a>flex factors</a>&gt;</code>.
19681965

1969-
<details class=note>
1970-
<summary><<flex>> values between 0fr and 1fr have a somewhat special behavior:
1971-
when the sum of the flex factors is less than 1,
1972-
they will take up less than 100% of the leftover space.</summary>
1973-
1974-
A track’s <<flex>> value
1975-
is effectively a request for some proportion of the leftover space,
1976-
with ''1fr'' meaning “100% of the leftover space”;
1977-
then if the tracks in that axis are requesting more than 100% in total,
1978-
the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
1979-
However, if the tracks request <em>less</em> than the full amount
1980-
(such as three tracks that are each ''.25fr'')
1981-
then they'll each get exactly what they request
1982-
(25% of the leftover space to each,
1983-
with the final 25% left unfilled).
1984-
See [[#algo-flex-tracks]] for the exact details
1985-
of how leftover space is distributed.
1986-
1987-
This pattern is required for continuous behavior as ''fr'' values approach zero
1988-
(which means the tracks wants <em>none</em> of the leftover space).
1989-
Without this, a ''1fr'' track would take all of the leftover space;
1990-
but so would a ''0.1fr'' track,
1991-
and a ''0.01fr'' track,
1992-
etc.,
1993-
until finally the value is small enough to underflow to zero
1994-
and the track suddenly takes up none of the leftover space.
1995-
With this behavior,
1996-
the track instead gradually takes less of the leftover space
1997-
as its flex factor shrinks below ''1fr'',
1998-
smoothly transitioning to taking none of the leftover space at zero.
1999-
2000-
Unless this “partial fill” behavior is <em>specifically</em> what's desired,
2001-
authors should stick to values &ge; 1;
2002-
for example, using ''1fr'' and ''2fr'' is usually better
2003-
than using ''.33fr'' and ''.67fr'',
2004-
as they're more likely to behave as intended
2005-
if tracks are added or removed.
2006-
</details>
2007-
20081966
When the available space is infinite
20091967
(which happens when the <a>grid container</a>’s width or height is <a>indefinite</a>),
20101968
flex-sized <a>grid tracks</a> are sized to their contents while retaining their respective proportions.
@@ -2015,10 +1973,6 @@ Flexible Lengths: the ''fr'' unit</h4>
20151973
The maximum of those is used as the resolved ''1fr'' length (the <dfn>flex fraction</dfn>),
20161974
which is then multiplied by each <a>grid track</a>’s <a>flex factor</a> to determine its final size.
20171975

2018-
Note: <<flex>> values are not <<length>>s
2019-
(nor are they compatible with <<length>>s, like some <<percentage>> values),
2020-
so they cannot be represented in or combined with other unit types in ''calc()'' expressions.
2021-
20221976
<!--
20231977
██████ ███████ ██ ██ ████████ ██ ██ ████████ ████████ ████████
20241978
██ ██ ██ ██ ███ ███ ██ ██ ██ ██ ██ ██ ██ ██
@@ -5503,6 +5457,11 @@ Changes since the <a href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/">
55035457
<del>However, if the <a>grid container</a> parent is also the generator of the absolutely positioned element's <a>containing block</a>,
55045458
instead use the <a>grid area</a> determined in [[#abspos-items]].</del>
55055459
</blockquote>
5460+
5461+
<li id="change-2020-fr-unit">
5462+
Moved the definition of <<flex>> to [[css-values-4#fractions]],
5463+
as other specs also make use of it.
5464+
(<a href="https://github.com/w3c/csswg-drafts/issues/8027">Issue 8027</a>)
55065465
</ul>
55075466

55085467
<h3 id="changes-202008">

‎css-values-4/Overview.bs

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2918,6 +2918,75 @@ Combination of <<position>></h4>
29182918
as a <<length-percentage>>.
29192919

29202920

2921+
<!--
2922+
████████ ████████ ███ ██████ ████████ ████ ███████ ██ ██
2923+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██
2924+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██
2925+
██████ ████████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
2926+
██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ████
2927+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███
2928+
██ ██ ██ ██ ██ ██████ ██ ████ ███████ ██ ██
2929+
-->
2930+
2931+
<h3 id="fractions">
2932+
Flexible lengths: the <<flex>> type</h3>
2933+
2934+
Fraction values are non-negative <<dimension>>s denoted by
2935+
<dfn id="flex-value">&lt;flex></dfn>.
2936+
The unit identifier is <dfn value for="<flex>" lt="fr|fr unit">fr</dfn>.
2937+
2938+
These values specify
2939+
<dfn export lt="flexible length">flexible lengths</dfn>.
2940+
Each length defines a portion of a given space
2941+
which is specified by the context the type is used in.
2942+
2943+
Note: <<flex>> values are not <<length>>s
2944+
(nor are they compatible with <<length>>s, like some <<percentage>> values),
2945+
so they cannot be represented in or
2946+
combined with other unit typesin ''calc()'' expressions.
2947+
2948+
<details class=note>
2949+
<summary><<flex>> values between 0fr and 1fr have a somewhat special behavior:
2950+
when the sum of the flex factors is less than 1,
2951+
they will take up less than 100% of the leftover space.</summary>
2952+
2953+
A <<flex>> value is effectively a request for some proportion of the leftover space,
2954+
with ''1fr'' meaning “100% of the leftover space”;
2955+
then, if the used space sums up to more than 100% of the available space,
2956+
the requested space is rebalanced to keep the same ratio
2957+
but use up exactly 100% of it.
2958+
However, if the sum is <em>less</em> than the full amount
2959+
(such as three times ''.25fr'')
2960+
then the requested space is exactly what's used
2961+
(25% of the leftover space for each fraction,
2962+
with the final 25% left unfilled).
2963+
2964+
This pattern is required for continuous behavior as ''fr'' values approach zero
2965+
(which means the leftover space is <em>not</em> occupied by any fractions).
2966+
Without this, a ''1fr'' value would take all of the leftover space;
2967+
but so would a ''0.1fr'' value,
2968+
and a ''0.01fr'' value,
2969+
etc.,
2970+
until finally the value is small enough to underflow to zero
2971+
and the fractions suddenly take up none of the leftover space.
2972+
With this behavior,
2973+
the fractions instead gradually take less of the leftover space
2974+
as their flex factor shrinks below ''1fr'',
2975+
smoothly transitioning to taking none of the leftover space at zero.
2976+
2977+
Unless this “partial fill” behavior is <em>specifically</em> what's desired,
2978+
authors should stick to values &ge; 1;
2979+
for example, using ''1fr'' and ''2fr'' is usually better
2980+
than using ''.33fr'' and ''.67fr'',
2981+
as they're more likely to behave as intended
2982+
if fractions are added or removed.
2983+
</details>
2984+
2985+
Note: <<flex>> values are not <<length>>s
2986+
(nor are they compatible with <<length>>s, like some <<percentage>> values),
2987+
so they cannot be represented in or combined with other unit types in ''calc()'' expressions.
2988+
2989+
29212990
<!--
29222991
████████ ██ ██ ██ ██ ██████ ██████
29232992
██ ██ ██ ███ ██ ██ ██ ██ ██
@@ -5244,6 +5313,8 @@ Recent Changes</h3>
52445313
<li>Added formal definitions for <<url()>> and <<src()>> (in addition to <<url>>).
52455314
<li>Rephrased fragment-only URLs in terms of tree-scoped references.
52465315
(<a href="https://github.com/w3c/csswg-drafts/issues/3320">Issue 3320</a>)
5316+
<li>Moved the definition of <<flex>> from [[css-grid-1]] to this specification.
5317+
(<a href="https://github.com/w3c/csswg-drafts/issues/8027">Issue 8027</a>)
52475318
</ul>
52485319

52495320
Substantial changes since <a href="https://www.w3.org/TR/2021/WD-css-values-4-20211216/">16 December 2021 WD</a>:

0 commit comments

Comments
 (0)