From 39da75facc85df75705d5511aac2cdba7d7df299 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 23 Mar 2023 19:38:14 -0700 Subject: [PATCH 1/3] clarify flex-grow --- files/en-us/web/css/flex-grow/index.md | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md index d615c1dbe72723c..6531ad0205796e5 100644 --- a/files/en-us/web/css/flex-grow/index.md +++ b/files/en-us/web/css/flex-grow/index.md @@ -7,7 +7,9 @@ browser-compat: css.properties.flex-grow {{CSSRef}} -The **`flex-grow`** [CSS](/en-US/docs/Web/CSS) property sets the flex grow factor of a 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 containers remaining space should be assigned to the flex item's [main size](https://www.w3.org/TR/css-flexbox/#main-size). + +When the flex-container's main size is larger than the combined main size's 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. {{EmbedInteractiveExample("pages/css/flex-grow.html")}} @@ -55,18 +57,20 @@ 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. + #### HTML ```html

This is a Flex-Grow

A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .
-
A
-
B
-
C
-
D
-
E
-
F
+
A
+
B
+
C
+
D
+
E
+
F
``` @@ -81,12 +85,12 @@ The remaining space is the size of the flex container minus the size of all flex align-items: stretch; } -.box { +.small { flex-grow: 1; border: 3px solid rgba(0, 0, 0, 0.2); } -.box1 { +.double { flex-grow: 2; border: 3px solid rgba(0, 0, 0, 0.2); } @@ -96,6 +100,8 @@ The remaining space is the size of the flex container minus the size of all flex {{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 lesss than the size of the containers main axis, the extra space is distributed amount 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 {{Specifications}} From 34b7c0cca092860756f98c6549f9b0525c1577c3 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 23 Mar 2023 19:52:12 -0700 Subject: [PATCH 2/3] spaces --- files/en-us/web/css/flex-grow/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md index 6531ad0205796e5..5a6a191cb251441 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 containers remaining space should be assigned to the flex item's [main size](https://www.w3.org/TR/css-flexbox/#main-size). -When the flex-container's main size is larger than the combined main size's 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 size's 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. {{EmbedInteractiveExample("pages/css/flex-grow.html")}} @@ -57,7 +57,7 @@ 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 8 growth factors distributed among the 6 flex items, meaning each growth factor is 12.5% of the remaining space. #### HTML From fc2068104d966bdd3085fb6700747255e435ac5f Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Thu, 23 Mar 2023 21:07:54 -0700 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: dawei-wang --- files/en-us/web/css/flex-grow/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/flex-grow/index.md b/files/en-us/web/css/flex-grow/index.md index 5a6a191cb251441..282c93e691c2757 100644 --- a/files/en-us/web/css/flex-grow/index.md +++ b/files/en-us/web/css/flex-grow/index.md @@ -7,7 +7,7 @@ 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 containers 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 remaining space should be assigned to the flex item's [main size](https://www.w3.org/TR/css-flexbox/#main-size). When the flex-container's main size is larger than the combined main size's 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. @@ -100,7 +100,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 lesss than the size of the containers main axis, the extra space is distributed amount 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