[css-values-4] Moved definition of <flex> to CSS Values 4

Author: SebastianZ

css-borders-4/Overview.bs

@@ -336,7 +336,7 @@ The 'border-clip' properties</h3>
 		the border edge. The first part is visible, the second is invisible,
 		the third part is visible, etc. Parts can be specified with lengths,
 		percentages, or flexible lengths (expressed by the ''fr'' unit, as per
-		[[CSS3GRID]]).
+		[[css-values-4#fractions]]).
 		The ''border-clip/normal'' value means
 		that the border is not split, but shown normally.
 

css-grid-1/Overview.bs

@@ -1527,11 +1527,11 @@ Track Sizes</h4>
 
 		<dt><dfn><<flex [0,∞]>></dfn>
 		<dd>
-			A non-negative dimension with the unit ''fr'' specifying the track's <dfn dfn noexport>flex factor</dfn>.
+			Specifies the track's <dfn dfn noexport>flex factor</dfn>.
 			Each <<flex>>-sized track takes a share of the remaining space in proportion to its <a>flex factor</a>.
 			For example, given a track listing of ''1fr 2fr'',
 			the tracks will take up ⅓ and ⅔ of the <a>leftover space</a>, respectively.
-			See [[#fr-unit]] for more details.
+			See [[#flexible-tracks]] for more details.
 
 			Note: If the sum of the <a>flex factors</a> is less than 1,
 			they'll take up only a corresponding fraction of the <a>leftover space</a>,
@@ -1835,22 +1835,19 @@ Interpolation/Combination of ''repeat()''</h5>
 	They otherwise combine <a lt=discrete>discretely</a>.
 
 <!--
-████████ ████████        ██     ██ ██    ██ ████ ████████
-██       ██     ██       ██     ██ ███   ██  ██     ██
-██       ██     ██       ██     ██ ████  ██  ██     ██
-██████   ████████        ██     ██ ██ ██ ██  ██     ██
-██       ██   ██         ██     ██ ██  ████  ██     ██
-██       ██    ██        ██     ██ ██   ███  ██     ██
-██       ██     ██        ███████  ██    ██ ████    ██
+████████ ██       ████████ ██     ██ ████ ████████  ██       ████████
+██       ██       ██        ██   ██   ██  ██     ██ ██       ██
+██       ██       ██         ██ ██    ██  ██     ██ ██       ██
+██████   ██       ██████      ███     ██  ████████  ██       ██████
+██       ██       ██         ██ ██    ██  ██     ██ ██       ██
+██       ██       ██        ██   ██   ██  ██     ██ ██       ██
+██       ████████ ████████ ██     ██ ████ ████████  ████████ ████████
 -->
 
-<h4 id='fr-unit'>
-Flexible Lengths: the ''fr'' unit</h4>
+<h4 id='flexible-tracks'>
+Flexible Tracks</h4>
 
-	A <dfn export>flexible length</dfn> or <dfn><<flex>></dfn> is a dimension
-	with the <dfn value for="<flex>" lt="fr|fr unit">fr</dfn> unit,
-	which represents a fraction of the <a>leftover space</a> in the <a>grid container</a>.
-	Tracks sized with ''fr'' units are called <dfn>flexible tracks</dfn>
+	Tracks sized using <<flex>> values are called <dfn>flexible tracks</dfn>
 	as they flex in response to <a>leftover space</a>
 	similar to how <a>flex items</a> with a zero base size fill space in a <a>flex container</a>.
 
@@ -1861,45 +1858,6 @@ Flexible Lengths: the ''fr'' unit</h4>
 	Each column or row's share of the <a>leftover space</a> can be computed as the column or row's
 	<code>&lt;flex> * &lt;leftover space> / &lt;sum of all <a>flex factors</a>&gt;</code>.
 
-	<details class=note>
-		<summary><<flex>> values between 0fr and 1fr have a somewhat special behavior:
-		when the sum of the flex factors is less than 1,
-		they will take up less than 100% of the leftover space.</summary>
-
-		A track’s <<flex>> value
-		is effectively a request for some proportion of the leftover space,
-		with ''1fr'' meaning “100% of the leftover space”;
-		then if the tracks in that axis are requesting more than 100% in total,
-		the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
-		However, if the tracks request <em>less</em> than the full amount
-		(such as three tracks that are each ''.25fr'')
-		then they'll each get exactly what they request
-		(25% of the leftover space to each,
-		with the final 25% left unfilled).
-		See [[#algo-flex-tracks]] for the exact details
-		of how leftover space is distributed.
-
-		This pattern is required for continuous behavior as ''fr'' values approach zero
-		(which means the tracks wants <em>none</em> of the leftover space).
-		Without this, a ''1fr'' track would take all of the leftover space;
-		but so would a ''0.1fr'' track,
-		and a ''0.01fr'' track,
-		etc.,
-		until finally the value is small enough to underflow to zero
-		and the track suddenly takes up none of the leftover space.
-		With this behavior,
-		the track instead gradually takes less of the leftover space
-		as its flex factor shrinks below ''1fr'',
-		smoothly transitioning to taking none of the leftover space at zero.
-
-		Unless this “partial fill” behavior is <em>specifically</em> what's desired,
-		authors should stick to values &ge; 1;
-		for example, using ''1fr'' and ''2fr'' is usually better
-		than using ''.33fr'' and ''.67fr'',
-		as they're more likely to behave as intended
-		if tracks are added or removed.
-	</details>
-
 	When the available space is infinite
 	(which happens when the <a>grid container</a>’s width or height is <a>indefinite</a>),
 	flex-sized <a>grid tracks</a> are sized to their contents while retaining their respective proportions.
@@ -1910,10 +1868,6 @@ Flexible Lengths: the ''fr'' unit</h4>
 	The maximum of those is used as the resolved ''1fr'' length (the <dfn>flex fraction</dfn>),
 	which is then multiplied by each <a>grid track</a>’s <a>flex factor</a> to determine its final size.
 
-	Note: <<flex>> values are not <<length>>s
-	(nor are they compatible with <<length>>s, like some <<percentage>> values),
-	so they cannot be represented in or combined with other unit types in ''calc()'' expressions.
-
 <!--
  ██████   ███████  ██     ██ ████████  ██     ██ ████████ ████████ ████████
 ██    ██ ██     ██ ███   ███ ██     ██ ██     ██    ██    ██       ██     ██
@@ -4917,6 +4871,10 @@ Changes since the <a href="https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/">
 			and grid track sizing.
 			See [[#layout-algorithm]].
 			(<a href="https://github.com/w3c/csswg-drafts/issues/3418">Issue 3418</a>)
+		<li id="change-2020-fr-unit">
+			Moved the definition of <<flex>> to [[css-values-4#fractions]],
+			as other specs also make use of it.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/8027">Issue 8027</a>)
 	</ul>
 
 <h3 id="changes-202008">

css-grid-2/Overview.bs

@@ -1936,22 +1936,19 @@ Interpolation/Combination of ''repeat()''</h5>
 	They otherwise combine <a lt=discrete>discretely</a>.
 
 <!--
-████████ ████████        ██     ██ ██    ██ ████ ████████
-██       ██     ██       ██     ██ ███   ██  ██     ██
-██       ██     ██       ██     ██ ████  ██  ██     ██
-██████   ████████        ██     ██ ██ ██ ██  ██     ██
-██       ██   ██         ██     ██ ██  ████  ██     ██
-██       ██    ██        ██     ██ ██   ███  ██     ██
-██       ██     ██        ███████  ██    ██ ████    ██
+████████ ██       ████████ ██     ██ ████ ████████  ██       ████████
+██       ██       ██        ██   ██   ██  ██     ██ ██       ██
+██       ██       ██         ██ ██    ██  ██     ██ ██       ██
+██████   ██       ██████      ███     ██  ████████  ██       ██████
+██       ██       ██         ██ ██    ██  ██     ██ ██       ██
+██       ██       ██        ██   ██   ██  ██     ██ ██       ██
+██       ████████ ████████ ██     ██ ████ ████████  ████████ ████████
 -->
 
-<h4 id='fr-unit'>
-Flexible Lengths: the ''fr'' unit</h4>
+<h4 id='flexible-tracks'>
+Flexible Tracks</h4>
 
-	A <dfn export>flexible length</dfn> or <dfn><<flex>></dfn> is a dimension
-	with the <dfn value for="<flex>" lt="fr|fr unit">fr</dfn> unit,
-	which represents a fraction of the <a>leftover space</a> in the <a>grid container</a>.
-	Tracks sized with ''fr'' units are called <dfn>flexible tracks</dfn>
+	Tracks sized using <<flex>> values are called <dfn>flexible tracks</dfn>
 	as they flex in response to <a>leftover space</a>
 	similar to how <a>flex items</a> with a zero base size fill space in a <a>flex container</a>.
 
@@ -1962,45 +1959,6 @@ Flexible Lengths: the ''fr'' unit</h4>
 	Each column or row's share of the <a>leftover space</a> can be computed as the column or row's
 	<code>&lt;flex> * &lt;leftover space> / &lt;sum of all <a>flex factors</a>&gt;</code>.
 
-	<details class=note>
-		<summary><<flex>> values between 0fr and 1fr have a somewhat special behavior:
-		when the sum of the flex factors is less than 1,
-		they will take up less than 100% of the leftover space.</summary>
-
-		A track’s <<flex>> value
-		is effectively a request for some proportion of the leftover space,
-		with ''1fr'' meaning “100% of the leftover space”;
-		then if the tracks in that axis are requesting more than 100% in total,
-		the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
-		However, if the tracks request <em>less</em> than the full amount
-		(such as three tracks that are each ''.25fr'')
-		then they'll each get exactly what they request
-		(25% of the leftover space to each,
-		with the final 25% left unfilled).
-		See [[#algo-flex-tracks]] for the exact details
-		of how leftover space is distributed.
-
-		This pattern is required for continuous behavior as ''fr'' values approach zero
-		(which means the tracks wants <em>none</em> of the leftover space).
-		Without this, a ''1fr'' track would take all of the leftover space;
-		but so would a ''0.1fr'' track,
-		and a ''0.01fr'' track,
-		etc.,
-		until finally the value is small enough to underflow to zero
-		and the track suddenly takes up none of the leftover space.
-		With this behavior,
-		the track instead gradually takes less of the leftover space
-		as its flex factor shrinks below ''1fr'',
-		smoothly transitioning to taking none of the leftover space at zero.
-
-		Unless this “partial fill” behavior is <em>specifically</em> what's desired,
-		authors should stick to values &ge; 1;
-		for example, using ''1fr'' and ''2fr'' is usually better
-		than using ''.33fr'' and ''.67fr'',
-		as they're more likely to behave as intended
-		if tracks are added or removed.
-	</details>
-
 	When the available space is infinite
 	(which happens when the <a>grid container</a>’s width or height is <a>indefinite</a>),
 	flex-sized <a>grid tracks</a> are sized to their contents while retaining their respective proportions.
@@ -2011,10 +1969,6 @@ Flexible Lengths: the ''fr'' unit</h4>
 	The maximum of those is used as the resolved ''1fr'' length (the <dfn>flex fraction</dfn>),
 	which is then multiplied by each <a>grid track</a>’s <a>flex factor</a> to determine its final size.
 
-	Note: <<flex>> values are not <<length>>s
-	(nor are they compatible with <<length>>s, like some <<percentage>> values),
-	so they cannot be represented in or combined with other unit types in ''calc()'' expressions.
-
 <!--
  ██████   ███████  ██     ██ ████████  ██     ██ ████████ ████████ ████████
 ██    ██ ██     ██ ███   ███ ██     ██ ██     ██    ██    ██       ██     ██
@@ -5528,6 +5482,11 @@ Changes since the <a href="https://www.w3.org/TR/2020/CRD-css-grid-2-20201218/">
 			and grid track sizing.
 			See [[#layout-algorithm]].
 			(<a href="https://github.com/w3c/csswg-drafts/issues/3418">Issue 3418</a>)
+
+		<li id="change-2020-fr-unit">
+			Moved the definition of <<flex>> to [[css-values-4#fractions]],
+			as other specs also make use of it.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/8027">Issue 8027</a>)
 	</ul>
 
 <h3 id="changes-202008">

css-values-4/Overview.bs

@@ -2847,6 +2847,75 @@ Combination of <<position>></h4>
 	as a <<length-percentage>>.
 
 
+<!--
+████████ ████████     ███      ██████  ████████ ████  ███████  ██    ██
+██       ██     ██   ██ ██    ██    ██    ██     ██  ██     ██ ███   ██
+██       ██     ██  ██   ██   ██          ██     ██  ██     ██ ████  ██
+██████   ████████  ██     ██  ██          ██     ██  ██     ██ ██ ██ ██
+██       ██   ██   █████████  ██          ██     ██  ██     ██ ██  ████
+██       ██    ██  ██     ██  ██    ██    ██     ██  ██     ██ ██   ███
+██       ██     ██ ██     ██   ██████     ██    ████  ███████  ██    ██
+-->
+
+<h3 id="fractions">
+Flexible lengths: the <<flex>> type</h3>
+
+	Fraction values are non-negative <<dimension>>s denoted by
+	<dfn id="flex-value">&lt;flex></dfn>.
+	The unit identifier is <dfn value for="<flex>" lt="fr|fr unit">fr</dfn>.
+
+	These values specify
+	<dfn export lt="flexible length">flexible lengths</dfn>.
+	Each length defines a portion of a given space
+	which is specified by the context the type is used in.
+
+	Note: <<flex>> values are not <<length>>s
+	(nor are they compatible with <<length>>s, like some <<percentage>> values),
+	so they cannot be represented in or
+	combined with other unit typesin ''calc()'' expressions.
+
+	<details class=note>
+		<summary><<flex>> values between 0fr and 1fr have a somewhat special behavior:
+		when the sum of the flex factors is less than 1,
+		they will take up less than 100% of the leftover space.</summary>
+
+		A <<flex>> value is effectively a request for some proportion of the leftover space,
+		with ''1fr'' meaning “100% of the leftover space”;
+		then, if the used space sums up to more than 100% of the available space,
+		the requested space is rebalanced to keep the same ratio
+		but use up exactly 100% of it.
+		However, if the sum is <em>less</em> than the full amount
+		(such as three times ''.25fr'')
+		then the requested space is exactly what's used
+		(25% of the leftover space for each fraction,
+		with the final 25% left unfilled).
+
+		This pattern is required for continuous behavior as ''fr'' values approach zero
+		(which means the leftover space is <em>not</em> occupied by any fractions).
+		Without this, a ''1fr'' value would take all of the leftover space;
+		but so would a ''0.1fr'' value,
+		and a ''0.01fr'' value,
+		etc.,
+		until finally the value is small enough to underflow to zero
+		and the fractions suddenly take up none of the leftover space.
+		With this behavior,
+		the fractions instead gradually take less of the leftover space
+		as their flex factor shrinks below ''1fr'',
+		smoothly transitioning to taking none of the leftover space at zero.
+
+		Unless this “partial fill” behavior is <em>specifically</em> what's desired,
+		authors should stick to values &ge; 1;
+		for example, using ''1fr'' and ''2fr'' is usually better
+		than using ''.33fr'' and ''.67fr'',
+		as they're more likely to behave as intended
+		if fractions are added or removed.
+	</details>
+
+	Note: <<flex>> values are not <<length>>s
+	(nor are they compatible with <<length>>s, like some <<percentage>> values),
+	so they cannot be represented in or combined with other unit types in ''calc()'' expressions.
+
+
 <!--
 ████████ ██     ██ ██    ██  ██████   ██████
 ██       ██     ██ ███   ██ ██    ██ ██    ██
@@ -5234,6 +5303,8 @@ Recent Changes</h3>
 		<li>Added formal definitions for <<url()>> and <<src()>> (in addition to <<url>>).
 		<li>Rephrased fragment-only URLs in terms of tree-scoped references.
 			(<a href="https://github.com/w3c/csswg-drafts/issues/3320">Issue 3320</a>)
+		<li>Moved the definition of <<flex>> from [[css-grid-1]] to this specification.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/8027">Issue 8027</a>)
 	</ul>
 
 	Substantial changes since <a href="https://www.w3.org/TR/2021/WD-css-values-4-20211216/">16 December 2021 WD</a>: