Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix a typo in flex-grow documentation #37270

Merged
merged 2 commits into from
Dec 20, 2024
Merged

Fix a typo in flex-grow documentation #37270

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0919c0
Update index.md
congnd Dec 19, 2024
d90e2ea
Update files/en-us/web/css/flex-grow/index.md
estelle Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion files/en-us/web/css/flex-grow/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 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.
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. There are a total of 6 grow factors (`0 + 1 + 2 + 3`). 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.

`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.

Expand Down
Loading