Skip to content

Commit bdecbff

Browse files
OnkarRuikargithub-actions[bot]chrisdavidmills
authored
fix(css): Fix flex: 1 explanation (#37553)
* fix(css): Fix `flex: 1` explanation * Update files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * remove line break * Update files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md Co-authored-by: Chris Mills <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Chris Mills <[email protected]>
1 parent 2befe9e commit bdecbff

File tree

1 file changed

+1
-1
lines changed
  • files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox

1 file changed

+1
-1
lines changed

files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,7 @@ Using `flex: auto` is the same as using `flex: 1 1 auto`; this is similar to `fl
292292

293293
Using `flex: none` will create fully inflexible flex items. It is as if you wrote `flex: 0 0 auto`. The items cannot grow or shrink and will be laid out using flexbox with a `flex-basis` of `auto`.
294294

295-
The shorthand you often see in tutorials is `flex: 1` or `flex: 2` and so on. This is the same as writing `flex: 1 1 0` or `flex: 2 1 0` and so on, respectively. The items can grow and shrink from a `flex-basis` of `0`.
295+
The shorthand you often see in tutorials is `flex: 1` or `flex: 2` and so on. This is the same as writing `flex: 1 1 0` or `flex: 2 1 0` and so on, respectively. The items get minimum size due to `flex-basis: 0` and then proportionally grow to fill the available space. In this case, the `flex-shrink` value of `1` is redundant because the items start with minimum size — they're not given any size that could cause them to overflow the flex container.
296296

297297
Try these shorthand values in the live sample below.
298298

0 commit comments

Comments
 (0)