From 0169d3642bf2bba0e0696e6e212ef96d0a178d45 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 17 Jun 2024 21:15:27 -0700 Subject: [PATCH 1/5] CSS maintenance: flex-grow property --- files/en-us/web/css/flex-grow/index.md | 37 +++++++++++++++----------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md index 62a68a3c7d0f1d3..eb4a4a3d22a8388 100644 --- a/files/en-us/web/css/flex-grow/index.md +++ b/files/en-us/web/css/flex-grow/index.md @@ -7,9 +7,9 @@ browser-compat: css.properties.flex-grow {{CSSRef}} -The **`flex-grow`** [CSS](/en-US/docs/Web/CSS) property sets the flex grow factor, which specifies how much of the flex container's remaining space should be assigned to the flex item's [main size](https://www.w3.org/TR/css-flexbox/#main-size). +The **`flex-grow`** [CSS](/en-US/docs/Web/CSS) property sets the flex grow factor, which specifies how much of the flex container's [**positive free space**](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis), if any, should be assigned to the flex item's [main size](/en-US/docs/Learn/CSS/CSS_layout/Flexbox#the_flex_model). -When the flex-container's main size is larger than the combined main sizes of the flex items, the extra space is distributed among the flex items, with each item growth being their growth factor value as a proportion of the sum total of all the container's items' flex grow factors. +When the flex-container's main size is larger than the combined main sizes of its flex items, this positive free space can be distributed among the flex items, with each item's growth being their growth factor value as a proportion of the sum total of all the container's flex items' flex grow factors. {{EmbedInteractiveExample("pages/css/flex-grow.html")}} @@ -33,17 +33,21 @@ The `flex-grow` property is specified as a single ``. ### Values - `` - - : See {{cssxref("<number>")}}. Negative values are invalid. Defaults to 0. + - : See {{cssxref("<number>")}}. Negative values are invalid. Defaults to 0, which prevents the flex item from growing. ## Description This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor). -The [main size](https://www.w3.org/TR/css-flexbox/#main-size) is either width or height of the item which is dependent on the {{cssxref("flex-direction")}} value. +The [main size](/en-US/docs/Learn/CSS/CSS_layout/Flexbox#the_flex_model) is either the width or height of the item, depending on the {{cssxref("flex-direction")}} value. -The remaining space is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factors. +The remaining space, or positive free space, is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space. The common practice is to set `flex-grow: 1`, but setting the flex grow factor for all the flex items to `88`, `100`, or `1.2`, any value greater than `0`, will produce the same result; the value is a ratio. -`flex-grow` is used alongside the other flex properties {{cssxref("flex-shrink")}} and {{cssxref("flex-basis")}}, and normally defined using the {{cssxref("flex")}} shorthand to ensure all values are set. +If the `flex-grow` values differ, the positive free space is distributed according to the ratio defined by the different flex grow factors. The `flex-grow` factor values of all the sibling flex items are added together. The flex container positive free space, if any, is then divided by that total. Each main-size of each flex item with a `flex-grow` value greater than `0` will grow by this quotient multiplied by its owngrowth factor. + +For example, if four `100px` flex items are in a `700px` container with a `flex-grow` factor of `0`, `1`, `2`, and `3`, respectively, the total main size of the three items is `400px`, meaning there is `300px` of positive free space to be distributed. There are a total of 6 grow factors, meaning each grow factor is equal to `50px` (`(300px / 6 )`, which gets distributed based on the items grow factor, leading to flex items that are `100px`, `150px`, `200px`, and `250px` respectively. + +The `flex-grow` is generally used alongside the other {{cssxref("flex")}} shorthand properties, {{cssxref("flex-shrink")}} and {{cssxref("flex-basis")}}. Using the `flex` shorthand property is recommended to ensure all values are set. ## Formal definition @@ -57,12 +61,12 @@ The remaining space is the size of the flex container minus the size of all flex ### Setting flex item grow factor -In this example, there is a total of 8 growth factors distributed among the 6 flex items, meaning each growth factor is 12.5% of the remaining space. +In this example, there is a total of eight growth factors distributed among the six flex items, meaning each growth factor is `12.5%` of the remaining space. #### HTML ```html -

This is a Flex-Grow

+

This is a flex-grow

A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .
A
@@ -79,15 +83,14 @@ In this example, there is a total of 8 growth factors distributed among the 6 fl ```css #content { display: flex; +} - justify-content: space-around; - flex-flow: row wrap; - align-items: stretch; +div > div { + border: 3px solid rgb(0 0 0 / 20%); } .small { flex-grow: 1; - border: 3px solid rgb(0 0 0 / 20%); } .double { @@ -100,7 +103,7 @@ In this example, there is a total of 8 growth factors distributed among the 6 fl {{EmbedLiveSample('Setting flex item grow factor')}} -When the six flex items are distributed along the container's main axis, if the sum of the main content of those flex items is less than the size of the container's main axis, the extra space is distributed among the size flex items, with A, B, C, and F, each getting 12.5% of the remaining space and D and E each getting 25% of the extra space. +When the six flex items are distributed along the container's main axis, if the sum of the main content of those flex items is less than the size of the container's main axis, the extra space is distributed among the size flex items, with `A`, `B`, `C`, and `F`, each getting `12.5%` of the remaining space and `D` and `E` each getting `25%` of the extra space. ## Specifications @@ -112,6 +115,8 @@ When the six flex items are distributed along the container's main axis, if the ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ -- [`flex-grow` is weird. Or is it?](https://css-tricks.com/flex-grow-is-weird/) article by Manuel Matuzovic on CSS-Tricks, which illustrates how flex-grow works +- {{cssxref("flex")}} shorthand +- [Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module +- [`flex-grow` is weird. Or is it?](https://css-tricks.com/flex-grow-is-weird/) via CSS-Tricks (2017) From 39c30a890075d890cec80bf3195460d9e753a1b0 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 17 Jun 2024 21:19:36 -0700 Subject: [PATCH 2/5] Update files/en-us/web/css/flex-grow/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/flex-grow/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md index eb4a4a3d22a8388..9cf171fb4d9d6bd 100644 --- a/files/en-us/web/css/flex-grow/index.md +++ b/files/en-us/web/css/flex-grow/index.md @@ -45,7 +45,7 @@ The remaining space, or positive free space, is the size of the flex container m If the `flex-grow` values differ, the positive free space is distributed according to the ratio defined by the different flex grow factors. The `flex-grow` factor values of all the sibling flex items are added together. The flex container positive free space, if any, is then divided by that total. Each main-size of each flex item with a `flex-grow` value greater than `0` will grow by this quotient multiplied by its owngrowth factor. -For example, if four `100px` flex items are in a `700px` container with a `flex-grow` factor of `0`, `1`, `2`, and `3`, respectively, the total main size of the three items is `400px`, meaning there is `300px` of positive free space to be distributed. There are a total of 6 grow factors, meaning each grow factor is equal to `50px` (`(300px / 6 )`, which gets distributed based on the items grow factor, leading to flex items that are `100px`, `150px`, `200px`, and `250px` respectively. +For example, if four `100px` flex items are in a `700px` container with a `flex-grow` factor of `0`, `1`, `2`, and `3`, respectively, the total main size of the three items is `400px`, meaning there is `300px` of positive free space to be distributed. There are a total of 6 grow factors, meaning each grow factor is equal to `50px` (`(300px / 6 )`, which gets distributed based on the items grow factor, leading to flex items that are `100px`, `150px`, `200px`, and `250px` respectively. The `flex-grow` is generally used alongside the other {{cssxref("flex")}} shorthand properties, {{cssxref("flex-shrink")}} and {{cssxref("flex-basis")}}. Using the `flex` shorthand property is recommended to ensure all values are set. From dd1c723e98393a013a303d3c091dd5c4783a6f94 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 17 Jun 2024 21:19:45 -0700 Subject: [PATCH 3/5] Update files/en-us/web/css/flex-grow/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/flex-grow/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md index 9cf171fb4d9d6bd..565c5590ba6bc33 100644 --- a/files/en-us/web/css/flex-grow/index.md +++ b/files/en-us/web/css/flex-grow/index.md @@ -43,7 +43,7 @@ The [main size](/en-US/docs/Learn/CSS/CSS_layout/Flexbox#the_flex_model) is eith The remaining space, or positive free space, is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space. The common practice is to set `flex-grow: 1`, but setting the flex grow factor for all the flex items to `88`, `100`, or `1.2`, any value greater than `0`, will produce the same result; the value is a ratio. -If the `flex-grow` values differ, the positive free space is distributed according to the ratio defined by the different flex grow factors. The `flex-grow` factor values of all the sibling flex items are added together. The flex container positive free space, if any, is then divided by that total. Each main-size of each flex item with a `flex-grow` value greater than `0` will grow by this quotient multiplied by its owngrowth factor. +If the `flex-grow` values differ, the positive free space is distributed according to the ratio defined by the different flex grow factors. The `flex-grow` factor values of all the sibling flex items are added together. The flex container positive free space, if any, is then divided by that total. Each main-size of each flex item with a `flex-grow` value greater than `0` will grow by this quotient multiplied by its owngrowth factor. For example, if four `100px` flex items are in a `700px` container with a `flex-grow` factor of `0`, `1`, `2`, and `3`, respectively, the total main size of the three items is `400px`, meaning there is `300px` of positive free space to be distributed. There are a total of 6 grow factors, meaning each grow factor is equal to `50px` (`(300px / 6 )`, which gets distributed based on the items grow factor, leading to flex items that are `100px`, `150px`, `200px`, and `250px` respectively. From 977e7789828ad8a22cebdf387e4df9f5035cc917 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 24 Jun 2024 11:03:15 -0700 Subject: [PATCH 4/5] Apply suggestions from code review Co-authored-by: Chris Mills --- files/en-us/web/css/flex-grow/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md index 565c5590ba6bc33..66df338b6b308b5 100644 --- a/files/en-us/web/css/flex-grow/index.md +++ b/files/en-us/web/css/flex-grow/index.md @@ -9,7 +9,7 @@ browser-compat: css.properties.flex-grow The **`flex-grow`** [CSS](/en-US/docs/Web/CSS) property sets the flex grow factor, which specifies how much of the flex container's [**positive free space**](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis), if any, should be assigned to the flex item's [main size](/en-US/docs/Learn/CSS/CSS_layout/Flexbox#the_flex_model). -When the flex-container's main size is larger than the combined main sizes of its flex items, this positive free space can be distributed among the flex items, with each item's growth being their growth factor value as a proportion of the sum total of all the container's flex items' flex grow factors. +When the flex-container's main size is larger than the combined main sizes of its flex items, this positive free space can be distributed among the flex items, with each item's growth being their growth factor value as a proportion of the sum total of all the flex items' flex grow factors. {{EmbedInteractiveExample("pages/css/flex-grow.html")}} @@ -41,13 +41,13 @@ This property specifies how much of the remaining space in the flex container sh The [main size](/en-US/docs/Learn/CSS/CSS_layout/Flexbox#the_flex_model) is either the width or height of the item, depending on the {{cssxref("flex-direction")}} value. -The remaining space, or positive free space, is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space. The common practice is to set `flex-grow: 1`, but setting the flex grow factor for all the flex items to `88`, `100`, or `1.2`, any value greater than `0`, will produce the same result; the value is a ratio. +The remaining space, or positive free space, is the size of the flex container minus the size of all flex items' sizes together. If all sibling items have the same flex grow factor, then all items will receive the same share of remaining space. The common practice is to set `flex-grow: 1`, but setting the flex grow factor for all the flex items to `88`, `100`, `1.2`, or any other value greater than `0` will produce the same result: the value is a ratio. -If the `flex-grow` values differ, the positive free space is distributed according to the ratio defined by the different flex grow factors. The `flex-grow` factor values of all the sibling flex items are added together. The flex container positive free space, if any, is then divided by that total. Each main-size of each flex item with a `flex-grow` value greater than `0` will grow by this quotient multiplied by its owngrowth factor. +If the `flex-grow` values differ, the positive free space is distributed according to the ratio defined by the different flex grow factors. The `flex-grow` factor values of all the sibling flex items are added together. The flex container's positive free space, if any, is then divided by that total. The main size of each flex item with a `flex-grow` value greater than `0` will grow by this quotient multiplied by its own growth factor. -For example, if four `100px` flex items are in a `700px` container with a `flex-grow` factor of `0`, `1`, `2`, and `3`, respectively, the total main size of the three items is `400px`, meaning there is `300px` of positive free space to be distributed. There are a total of 6 grow factors, meaning each grow factor is equal to `50px` (`(300px / 6 )`, which gets distributed based on the items grow factor, leading to flex items that are `100px`, `150px`, `200px`, and `250px` respectively. +For example, if four `100px` flex items are in a `700px` container and the flex items have `flex-grow` factors of `0`, `1`, `2`, and `3`, respectively, the total main size of the three items is `400px`, meaning there is `300px` of positive free space to be distributed. There are a total of 6 grow factors (`3 + 2 + 1`), therefore each grow factor is equal to `50px` (`(300px / 6 )`. Each flex item is given an amount of positive free space equal to this amount multiplied by its `flex-grow` value — so `0`, `50px`, `100px`, and `150px` respectively. The total flex item sizes are therefore `100px`, `150px`, `200px`, and `250px` respectively. -The `flex-grow` is generally used alongside the other {{cssxref("flex")}} shorthand properties, {{cssxref("flex-shrink")}} and {{cssxref("flex-basis")}}. Using the `flex` shorthand property is recommended to ensure all values are set. +`flex-grow` is generally used alongside the other {{cssxref("flex")}} shorthand properties, {{cssxref("flex-shrink")}} and {{cssxref("flex-basis")}}. Using the `flex` shorthand property is recommended to ensure all values are set. ## Formal definition @@ -66,8 +66,8 @@ In this example, there is a total of eight growth factors distributed among the #### HTML ```html -

This is a flex-grow

-
A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .
+

This is a flex-grow example

+

A, B, C, and F have flex-grow: 1 set . D and E have flex-grow: 2 set.

A
B
From 2c2c51c752fa36d4a1af71b0e6d9fe9164c88ce6 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 24 Jun 2024 11:07:38 -0700 Subject: [PATCH 5/5] Update files/en-us/web/css/flex-grow/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/flex-grow/index.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md index 66df338b6b308b5..24b979a13886289 100644 --- a/files/en-us/web/css/flex-grow/index.md +++ b/files/en-us/web/css/flex-grow/index.md @@ -67,7 +67,10 @@ In this example, there is a total of eight growth factors distributed among the ```html

This is a flex-grow example

-

A, B, C, and F have flex-grow: 1 set . D and E have flex-grow: 2 set.

+

+ A, B, C, and F have flex-grow: 1 set. D and E have + flex-grow: 2 set. +

A
B