From 26982ad7b3b33d5e6094d3044bfd835ed9f57abb Mon Sep 17 00:00:00 2001 From: Daniel Kolocka Date: Tue, 8 Apr 2025 21:12:25 -0700 Subject: [PATCH 1/2] update flex shorthand section for clarity with note on default values --- .../html_css/flexbox/flexbox-growing-and-shrinking.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/foundations/html_css/flexbox/flexbox-growing-and-shrinking.md b/foundations/html_css/flexbox/flexbox-growing-and-shrinking.md index d553535324a..4b10fc10b37 100644 --- a/foundations/html_css/flexbox/flexbox-growing-and-shrinking.md +++ b/foundations/html_css/flexbox/flexbox-growing-and-shrinking.md @@ -18,9 +18,12 @@ 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` 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`. From 62e180589d108aecf0e29f45799fb09fa289527a Mon Sep 17 00:00:00 2001 From: Daniel Kolocka Date: Tue, 8 Apr 2025 21:26:29 -0700 Subject: [PATCH 2/2] update flex shorthand section for clarity with note on default values --- foundations/html_css/flexbox/flexbox-growing-and-shrinking.md | 1 + 1 file changed, 1 insertion(+) diff --git a/foundations/html_css/flexbox/flexbox-growing-and-shrinking.md b/foundations/html_css/flexbox/flexbox-growing-and-shrinking.md index 4b10fc10b37..eaddd75b7d2 100644 --- a/foundations/html_css/flexbox/flexbox-growing-and-shrinking.md +++ b/foundations/html_css/flexbox/flexbox-growing-and-shrinking.md @@ -23,6 +23,7 @@ By default, the `flex` shorthand property is set to: `flex-grow: 0`, `flex-shrin ![flex shorthand](https://cdn.statically.io/gh/TheOdinProject/curriculum/0cc6b26bb0c4b94524369d327c97a8fb11e83b6b/foundations/html_css/flexbox/imgs/10.png) 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` 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`.