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

Jump to bottom

Foundations/Growing and Shrinking/Provide descriptive link text #27784

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Foundations/Growing and Shrinking/Provide descriptive link text #27784

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dd161bd
Provide descriptive link text to the "Grwing and Shrinking" lesson.
Rllopez0410 Apr 12, 2024
d4adfaf
Update flexbox-growing-and-shrinking.md
Rllopez0410 Apr 16, 2024
8f7ed0a
Update flexbox-growing-and-shrinking.md
Rllopez0410 Apr 16, 2024
5b347e6
Update flexbox-growing-and-shrinking.md
Rllopez0410 Apr 16, 2024
cabd625
Update flexbox-growing-and-shrinking.md
Rllopez0410 Apr 20, 2024
a195a70
Update flexbox-growing-and-shrinking.md
Rllopez0410 Apr 20, 2024
43dd65b
Update flexbox-growing-and-shrinking.md
Rllopez0410 Apr 20, 2024
8f38aef
Update flexbox-growing-and-shrinking.md
Rllopez0410 Apr 20, 2024
d729408
Update flexbox-growing-and-shrinking.md
Rllopez0410 Apr 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
49 changes: 30 additions & 19 deletions 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 @@ -6,7 +6,7 @@

This section contains a general overview of topics that you will learn in this lesson.

- You'll learn the 3 properties that are defined by the `flex` shorthand, and how to use them individually.
- You'll learn the 3 properties that are defined by the `flex` shorthand, and how to use them individually.

### The flex shorthand

Expand All @@ -22,34 +22,41 @@

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`.
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`.

#### Flex-grow

`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When we applied `flex: 1` to every div inside our container, we were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If we instead add `flex: 2` to just one of the divs, then that div would grow to 2x the size of the others.

In the following example the `flex` shorthand has values for `flex-shrink` and `flex-basis` specified with their default values.

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzQqvgK" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzQqvgK" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

Check failure on line 33 in foundations/html_css/flexbox/flexbox-growing-and-shrinking.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Trailing spaces 

foundations/html_css/flexbox/flexbox-growing-and-shrinking.md:33:306 MD009/no-trailing-spaces Trailing spaces [Expected: 0 or 2; Actual: 1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md009.md

Check failure on line 33 in foundations/html_css/flexbox/flexbox-growing-and-shrinking.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

foundations/html_css/flexbox/flexbox-growing-and-shrinking.md:33 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 1, After: 0 }
] [Context: "<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzQqvgK" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"> "] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md

<span>See the Pen <a href="https://codepen.io/TheOdinProjectExamples/pen/YzQqvgK">
flex-grow example</a> by TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
on <a href="https://codepen.io">CodePen</a>.</span>

Check failure on line 37 in foundations/html_css/flexbox/flexbox-growing-and-shrinking.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Trailing spaces 

foundations/html_css/flexbox/flexbox-growing-and-shrinking.md:37:54 MD009/no-trailing-spaces Trailing spaces [Expected: 0 or 2; Actual: 1] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md009.md

</p>

Check failure on line 39 in foundations/html_css/flexbox/flexbox-growing-and-shrinking.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

foundations/html_css/flexbox/flexbox-growing-and-shrinking.md:39 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 0, After: 1 }
] [Context: "</p>"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md


Check failure on line 41 in foundations/html_css/flexbox/flexbox-growing-and-shrinking.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiple consecutive blank lines 

foundations/html_css/flexbox/flexbox-growing-and-shrinking.md:41 MD012/no-multiple-blanks Multiple consecutive blank lines [Expected: 1; Actual: 2] https://github.com/DavidAnson/markdownlint/blob/v0.32.1/doc/md012.md
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### Flex-shrink

`flex-shrink` is similar to `flex-grow`, but sets the "shrink factor" of a flex item. `flex-shrink` only ends up being applied if the size of all flex items is larger than their parent container. For example, if our 3 divs from above had a width declaration like: `width: 100px`, and `.flex-container` was smaller than `300px`, our divs would have to shrink to fit.

The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do _not_ want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.
The default shrink factor is `flex-shrink: 1`, which means all items will shrink evenly. If you do *not* want an item to shrink then you can specify `flex-shrink: 0;`. You can also specify higher numbers to make certain items shrink at a higher rate than normal.

Here's an example. Note that we've also changed the `flex-basis` for reasons that will be explained shortly. If you shrink your browser window you'll notice that `.two` never gets smaller than the given width of 250px, even though the `flex-grow` rule would otherwise specify that each element should be equally sized.

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjJXZVz" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

Check failure on line 52 in foundations/html_css/flexbox/flexbox-growing-and-shrinking.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

foundations/html_css/flexbox/flexbox-growing-and-shrinking.md:52 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 1, After: 0 }
] [Context: "<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjJXZVz" data-editable="true" data-user="TheOdinProjectExamples" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md

<span>See the Pen <a href="https://codepen.io/TheOdinProjectExamples/pen/JjJXZVz">
flex-shrink example</a> by TheOdinProject (<a href="https://codepen.io/TheOdinProjectExamples">@TheOdinProjectExamples</a>)
on <a href="https://codepen.io">CodePen</a>.</span>

</p>

Check failure on line 58 in foundations/html_css/flexbox/flexbox-growing-and-shrinking.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Multiline HTML tags should be surrounded by blank lines or code block delimiters 

foundations/html_css/flexbox/flexbox-growing-and-shrinking.md:58 TOP005/blanks-around-multiline-html-tags Multiline HTML tags should be surrounded by blank lines or code block delimiters [
  Expected blank lines/code block delimiters: { Before: 1, After: 1 }
  Actual blank lines/code block delimiters: { Before: 0, After: 1 }
] [Context: "</p>"] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP005.md

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

An important implication to notice here is that when you specify `flex-grow` or `flex-shrink`, flex items do not necessarily respect your given values for `width`. In the above example, all 3 divs are given a width of 250px, but when their parent is big enough, they grow to fill it. Likewise, when the parent is too small, the default behavior is for them to shrink to fit. This is not a bug, but it could be confusing behavior if you aren't expecting it.
Expand All @@ -58,41 +65,45 @@

`flex-basis` sets the initial size of a flex item, so any sort of `flex-grow`ing or `flex-shrink`ing starts from that baseline size. The shorthand value defaults to `flex-basis: 0%`. The reason we had to change it to `auto` in the `flex-shrink` example is that with the basis set to `0`, those items would ignore the item's width, and everything would shrink evenly. Using `auto` as a flex-basis tells the item to check for a width declaration (`width: 250px`).

> #### Important note about flex-basis:
>
> There is a difference between the default value of `flex-basis` and the way the `flex` shorthand defines it if no `flex-basis` is given. The actual default value for `flex-basis` is `auto`, but when you specify `flex: 1` on an element, it interprets that as `flex: 1 1 0`. If you want to _only_ adjust an item's `flex-grow` you can do so directly, without the shorthand. Or you can be more verbose and use the full 3 value shorthand `flex: 1 1 auto`, which is also equivalent to using `flex: auto`.
<div class="lesson-note" markdown="1">

> #### What is flex: auto?
>
> If you noticed, we mentioned a new flex shorthand `flex: auto` in the previous note. However we didn't fully introduce it. `flex: auto` is one of the shorthands of flex. When `auto` is defined as a flex keyword it is equivalent to the values of `flex-grow: 1`, `flex-shrink: 1` and `flex-basis: auto` or to `flex: 1 1 auto` using the flex shorthand. Note that `flex: auto` is not the default value when using the flex shorthand despite the name being "auto" which may be slightly confusing at first. You will encounter and learn more about `flex: auto` and its potential use-cases when reading through the assignment section.
#### Important note about flex-basis

There is a difference between the default value of `flex-basis` and the way the `flex` shorthand defines it if no `flex-basis` is given. The actual default value for `flex-basis` is `auto`, but when you specify `flex: 1` on an element, it interprets that as `flex: 1 1 0`. If you want to *only* adjust an item's `flex-grow` you can do so directly, without the shorthand. Or you can be more verbose and use the full 3 value shorthand `flex: 1 1 auto`, which is also equivalent to using `flex: auto`.

</div>

#### What is flex auto?

If you noticed, we mentioned a new flex shorthand `flex: auto` in the previous note. However we didn't fully introduce it. `flex: auto` is one of the shorthands of flex. When `auto` is defined as a flex keyword it is equivalent to the values of `flex-grow: 1`, `flex-shrink: 1` and `flex-basis: auto` or to `flex: 1 1 auto` using the flex shorthand. Note that `flex: auto` is not the default value when using the flex shorthand despite the name being "auto" which may be slightly confusing at first. You will encounter and learn more about `flex: auto` and its potential use-cases when reading through the assignment section.

#### In practice...
#### In practice

In practice you will likely not be using complex values for `flex-grow`, `flex-shrink` or `flex-basis`. Generally, you're most likely to use declarations like `flex: 1;` to make divs grow evenly and `flex-shrink: 0` to keep certain divs from shrinking.

It _is_ possible to get fancy, and set up layouts where some columns relate to each other in a specific ratio, so it's useful to know that you can use other values, but those are relatively rare.
It *is* possible to get fancy, and set up layouts where some columns relate to each other in a specific ratio, so it's useful to know that you can use other values, but those are relatively rare.

### Assignment

<div class="lesson-content__panel" markdown="1">

1. Read [W3C's flex section](https://www.w3.org/TR/css-flexbox-1/#flex-common) to understand the basic values of common flex shorthand values.
- Read [W3C's flex section](https://www.w3.org/TR/css-flexbox-1/#flex-common) to understand the basic values of common flex shorthand values.

2. This [MDN Doc](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) summarizes the entire flex shorthand values as well as introduces some new syntax that hasn't been covered in the previous article.
- [MDN's documentation on flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) summarizes the entire flex shorthand values, as well as introduces some new syntax that hasn't been covered in the previous article.

</div>

### Knowledge check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

Check failure on line 98 in foundations/html_css/flexbox/flexbox-growing-and-shrinking.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Sections have default content 

foundations/html_css/flexbox/flexbox-growing-and-shrinking.md:98 TOP003/default-section-content Sections have default content [Expected: "The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge."; Actual: "This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to."] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP003.md

- [What are the 3 values defined in the shorthand `flex` property (e.g. `flex: 1 1 auto`)?](#the-flex-shorthand)
- [What are the 3 defined values for the flex shorthand `flex:auto`?](#what-is-flex-auto)
- [What are the 3 values defined in the shorthand `flex` property (e.g. `flex: 1 1 auto`)?](#the-flex-shorthand)
- [What are the 3 defined values for the flex shorthand `flex:auto`?](#what-is-flex-auto)

### Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

Check failure on line 105 in foundations/html_css/flexbox/flexbox-growing-and-shrinking.md

View workflow job for this annotation

GitHub Actions / Lint lesson files

Sections have default content 

foundations/html_css/flexbox/flexbox-growing-and-shrinking.md:105 TOP003/default-section-content Sections have default content [Expected: "This section contains helpful links to related content. It isn't required, so consider it supplemental."; Actual: "This section contains helpful links to related content. It isn’t required, so consider it supplemental."] https://github.com/TheOdinProject/curriculum/blob/main/markdownlint/docs/TOP003.md

* [Check out this video](https://www.youtube.com/watch?v=u044iM9xsWU&t=1s&pp=ugMICgJhchABGAE%3D) explaining how flexbox works and why.
- A [video exploring how flexbox works and why](https://www.youtube.com/watchv=u044iM9xsWU&t=1s&pp=ugMICgJhchABGAE%3D).

* For an interactive explanation and demo, check out the [Scrim on the flex shorthand](https://scrimba.com/learn/flexbox/the-flex-property-flexbox-tutorial-cGNKJTv). For an alternative explanation you can view the [Scrim on using flex-grow, flex-shrink, and flex-basis](https://scrimba.com/learn/flexbox/flex-grow-shrink-basis-flexbox-tutorial-ck6L7fv). Note that these Scrims require logging into Scrimba in order to view.
- For an interactive explanation and demo, check out the [Scrim on the flex shorthand](https://scrimba.com/learn/flexbox/the-flex-property-flexbox-tutorial-cGNKJTv). For an alternative explanation you can view the [Scrim on using flex-grow, flex-shrink, and flex-basis](https://scrimba.com/learn/flexbox/flex-grow-shrink-basis-flexbox-tutorial-ck6L7fv). Note that these Scrims require logging into Scrimba in order to view.