From 1f8f9b6747ca66f47a482cff59a1e4a4bfc796f8 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sat, 28 Dec 2024 10:37:29 -0800 Subject: [PATCH] Apply suggestions from code review --- 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 a81eba8bbe0952d..4d3a46764d2e282 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'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 and the flex items have `flex-grow` factors of `0`, `1`, `2`, and `3`, respectively, the total main size of the four items is `400px`, meaning there is `300px` of positive free space to be distributed. The sum of the four grow factors (`0 + 1 + 2 + 3 = 6`) is equal to six. Therefore, each unity grow factor is equal to `50px` (`(300px / 6 )`. Each flex item is given 50px of free space multiplied by its `flex-grow` factor — so `0`, `50px`, `100px`, and `150px` respectively. The total flex item sizes become `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 four items is `400px`, meaning there is `300px` of positive free space to be distributed. The sum of the four grow factors (`0 + 1 + 2 + 3 = 6`) is equal to six. Therefore, each grow factor is equal to `50px` (`(300px / 6 )`. Each flex item is given 50px of free space multiplied by its `flex-grow` factor — so `0`, `50px`, `100px`, and `150px` respectively. The total flex item sizes become `100px`, `150px`, `200px`, and `250px`, respectively. `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. @@ -61,7 +61,7 @@ For example, if four `100px` flex items are in a `700px` container and the flex ### Setting flex item grow factor -In this example, the sum of six flex-grow factors is equal to eight, meaning each unity growth-factor value is `12.5%` of the remaining space. +In this example, the sum of six flex-grow factors is equal to eight, meaning each growth-factor value is `12.5%` of the remaining space. #### HTML