Growing and Shrinking: Seeking improvement about a flex:1 paragraph

[matta]

Describe your suggestion

I find the second paragraph quoted below confusing.

In the above screenshot, flex: 1 equates to: flex-grow: 1, flex-shrink: 1, 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.

I see it was added in https://github.com/TheOdinProject/curriculum/commit/a0bd1544c6ca675a0a2c63273860c3dbb392826c as part of #24395 with a permalink here https://github.com/TheOdinProject/curriculum/blob/73ff0b1b55ab73e96f731ae306f5f812144b2b2e/foundations/html_css/flexbox/flexbox-growing-and-shrinking.md?plain=1#L25

This section is explaining that flex: 1 equates to setting flex-grow/shrink/basis values of 1 1 0. I understand the shorthand concept well.

It then goes on to say "Very often you see the flex shorthand defined with only one value." I take this to to be referring, again, to flex: 1.

If that is the case I don't understand what follows: "In that case, that value is applied to flex-grow." This I don't understand. Why mention flex-grow alone? Haven't we just said that it is shorthand for three values? This sentence also seems to contradict what follows, where "flex: 1" is shorthand for "flex: 1 1 0".

I am having trouble coming up with a suggested improvement here because I'm not sure what the paragraph is trying to say.

Path

Foundations

Lesson Url

https://www.theodinproject.com/lessons/foundations-growing-and-shrinking

Checks

• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [X] Would you like to work on this issue?

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[matta]

I see that this change was discussed in https://github.com/TheOdinProject/curriculum/issues/24177, and perhaps this paragraph can be improved with simple wordsmithing.

I still believe the sentence is not clear as written, because flex: an be given singular values that change more than just flex-grow and in fact always sets all three values. See: https://github.com/TheOdinProject/curriculum/issues/24177#issuecomment-1159541388

With this in mind, I suggest changing this (additions in bold):

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

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

If this sounds good I can send a PR.

Another alternative I can think of is deleting the second paragraph, since the first is sufficient for understanding the surrounding material. This, and/or linking to documentation about the flex: shorthand (which has surprisingly non-intuitive semantics).

[matta]

Wow. https://developer.mozilla.org/en-US/docs/Web/CSS/flex is quite complex. In these situations, I appreciate as a learner to be warned about it. Perhaps this is better:

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

Very often you see the flex shorthand used with one numerical value. In that case, the value is applied to flex-grow, and flex-shrink and flex-grow are set to 1 0 respectively. Had we used flex: 2 above it would have equated to flex-grow: 2, flex-shrink 1, flex-basis: 0. The semantics of the flex shorthand are more complex than this, which you will learn about in the assignments below.

[KevinMulhern]

Thanks @matta.

@TheOdinProject/html-css whats your thoughts?

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[wise-king-sullyman]

@matta your suggestion sounds good to me, would you still like to put a PR up for it?

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[nikty]

The real problem is this: previous lesson "Introduction to Flexbox" doesn't discuss flexbox in its depth and lacks "Assignments" section.

Interneting Is Hard's tutorial referenced in "Additional resources" has all the information for the next lesson, but is not considered mandatory.

The solution is to make that tutorial required reading.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.