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

clarify flex-grow #25590

Merged
merged 3 commits into from
Mar 24, 2023
Merged

clarify flex-grow #25590

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
39da75f
clarify flex-grow
estelle Mar 24, 2023
34b7c0c
spaces
estelle Mar 24, 2023
fc20681
Apply suggestions from code review
estelle Mar 24, 2023
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
24 changes: 15 additions & 9 deletions 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 @@ -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 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.

{{EmbedInteractiveExample("pages/css/flex-grow.html")}}

Expand Down Expand Up @@ -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
<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
<div class="box" style="background-color:brown;">F</div>
<div class="small" style="background-color:red;">A</div>
<div class="small" style="background-color:lightblue;">B</div>
<div class="small" style="background-color:yellow;">C</div>
<div class="double" style="background-color:brown;">D</div>
<div class="double" style="background-color:lightgreen;">E</div>
<div class="small" style="background-color:brown;">F</div>
</div>
```

Expand All @@ -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);
}
Expand All @@ -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 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

{{Specifications}}
Expand Down