Skip to content

Flexbox - Growing and Shrinking lesson: update flex shorthand section for clarity with note on default values #29603

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

Closed
wants to merge 2 commits into from
Closed

Flexbox - Growing and Shrinking lesson: update flex shorthand section for clarity with note on default values #29603

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26982ad
update flex shorthand section for clarity with note on default values
DanielKolocka Apr 9, 2025
62e1805
update flex shorthand section for clarity with note on default values
DanielKolocka Apr 9, 2025
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
6 changes: 5 additions & 1 deletion foundations/html_css/flexbox/flexbox-growing-and-shrinking.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,13 @@ The `flex` declaration is actually a shorthand for 3 properties that you can set

In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.

By default, the `flex` shorthand property is set to: `flex-grow: 0`, `flex-shrink: 1`, `flex-basis: auto`. This means the item won't grow, can shrink, and its size is based on content.

![flex shorthand](https://cdn.statically.io/gh/TheOdinProject/curriculum/0cc6b26bb0c4b94524369d327c97a8fb11e83b6b/foundations/html_css/flexbox/imgs/10.png)

In the above screenshot, `flex: 1` equates to: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.
In the above screenshot, `flex: 1` is shorthand for: `flex-grow: 1`, `flex-shrink: 1`, `flex-basis: 0`.

Note: The default `flex-basis: auto` is overwritten to `flex-basis: 0`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: do we need this? the line above already mentions it?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Kevin, so when going through this, It wasn't very clear to me the values of the 3 flex properties when the shorthand was used.
Given flex: 1, we get grow and shrink set to 1, so I just assumed also that basis would be set to 1. However, basis because 0 rather than 1.

Adding this isn't critical, but could clear up some confusion.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Essentially, it is unclear what the default value of flex-basis was.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the explanation Daniel.

I think the way you have things laid out makes things very clear. Learners will be able to see the difference between the defaults on line 21, and what flex: 1 sets on line 25. The note feels redundant since line 25 already communicates that - does that make sense?

I think there could be value in explaining why it is changed to 0 however.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @DanielKolocka — just checking in. Are you still interested in finishing this up? I think we could get it merged if we either remove the note or replace it with an explanation of why the shorthand uses flex-basis: 0.


Very often you see the flex shorthand defined with only *one* value. In that case, that value is applied to `flex-grow`. So when we put `flex: 1` on our divs, we were actually specifying a shorthand of `flex: 1 1 0`.

Expand Down