mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-14 07:00:51 -04:00
fix: flexbox part of The Odin Project (#52947)
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Sem Bauke
@@ -48,6 +48,10 @@
|
||||
{
|
||||
"id": "6571c34868e4b3b17d3957fb",
|
||||
"title": "Introduction to Flexbox Question J"
|
||||
},
|
||||
{
|
||||
"id": "6597b43d854b3fa8e35d66d7",
|
||||
"title": "Introduction to Flexbox Question K"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@ All 3 divs should now be arranged horizontally. If you resize the results frame
|
||||
|
||||
If you add another `div` to the HTML, inside of `.flex-container`, it will show up alongside the others, and everything will flex to fit within the available area.
|
||||
|
||||
> If it’s hard to see what’s going on in the small embedded CodePen, feel free to click the “Edit on CodePen” or “Fork on CodePen” button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
|
||||
> If it’s hard to see what's going on in the small embedded CodePen, feel free to click the "Edit on CodePen" or "Fork on CodePen" button. This will bring the example into a full-sized environment. Some of the later examples might especially benefit from doing this.
|
||||
|
||||
# --question--
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ Somewhat confusingly, any element can be both a flex container and a flex item.
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/495704c6eb6bf33bc927534f231533a82b27b2ac/html_css/v2/foundations/flexbox/imgs/04.png" />
|
||||
|
||||
Creating and nesting multiple flex containers and items is the primary way we will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
|
||||
Creating and nesting multiple flex containers and items is the primary way you will be building up complex layouts. The following image was achieved using only flexbox to arrange, size, and place the various elements. Flexbox is a very powerful tool.
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/495704c6eb6bf33bc927534f231533a82b27b2ac/html_css/v2/foundations/flexbox/imgs/05.png"/>
|
||||
|
||||
|
||||
@@ -5,29 +5,41 @@ challengeType: 15
|
||||
dashedName: introduction-flexbox-question-e
|
||||
---
|
||||
# --description--
|
||||
<!-- empty description -->
|
||||
|
||||
The `flex` declaration is actually a shorthand for 3 properties that you can set on a flex item. These properties affect how flex items size themselves within their container. You've seen some shorthand properties before, but you haven't officially defined them yet.
|
||||
|
||||
> Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) stylesheets, saving time and energy.
|
||||
|
||||
In this case, `flex` is actually a shorthand for `flex-grow`, `flex-shrink` and `flex-basis`.
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/0cc6b26bb0c4b94524369d327c97a8fb11e83b6b/foundations/html_css/flexbox/imgs/10.png" alt="flex shorthand">
|
||||
|
||||
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 you put `flex: 1` on our divs, you were actually specifying a shorthand of `flex: 1 1 0`.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
How do flex items behave when their parent flex container is resized?
|
||||
Which properties are set by the `flex` shorthand?
|
||||
|
||||
## --answers--
|
||||
|
||||
Flex items maintain fixed sizes.
|
||||
`flex-grow`, `flex-shrink`, and `flex`
|
||||
|
||||
---
|
||||
|
||||
Flex items adjust their sizes proportionally.
|
||||
`flex-basis`, `flex-wrap`, and `flex-direction`
|
||||
|
||||
---
|
||||
|
||||
Flex items overflow the container.
|
||||
`flex-grow`, `flex-shrink`, and `flex-basis`
|
||||
|
||||
---
|
||||
|
||||
Flex items collapse into a single column.
|
||||
`flex-direction`, `flex`, and `flex-wrap`
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
3
|
||||
|
||||
@@ -5,28 +5,34 @@ challengeType: 15
|
||||
dashedName: introduction-flexbox-question-f
|
||||
---
|
||||
# --description--
|
||||
<!-- empty description -->
|
||||
|
||||
`flex-grow` expects a single number as its value, and that number is used as the flex-item's "growth factor". When you applied `flex: 1` to every div inside our container, you were telling every div to grow the same amount. The result of this is that every div ends up the exact same size. If you 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.
|
||||
|
||||
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/YzQqvgK?height=300&default-tab=html%2Cresult&slug-hash=YzQqvgK&editable=true&user=TheOdinProjectExamples&name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_YzQqvgK"></iframe>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What property is used to make a flex item shrink and grow?
|
||||
What does setting `flex: 2` to one specific div inside a flex container, while other divs have `flex: 1`, imply?
|
||||
|
||||
## --answers--
|
||||
|
||||
`flex-shrink`
|
||||
The container will shrink to accommodate the larger div.
|
||||
|
||||
---
|
||||
|
||||
`flex-grow`
|
||||
All divs will retain the same size due to conflicting `flex` values.
|
||||
|
||||
---
|
||||
|
||||
`flex`
|
||||
The specific div will grow to be twice the size of the others.
|
||||
|
||||
---
|
||||
|
||||
`width` and `height`
|
||||
All divs will shrink equally to adjust to the new `flex` values.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@@ -6,31 +6,39 @@ dashedName: introduction-flexbox-question-g
|
||||
---
|
||||
# --description--
|
||||
|
||||
Search through <a href="https://www.freecodecamp.org/news/the-css-flexbox-handbook" target="_blank">our handbook</a> and find the answer to the question below.
|
||||
`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.
|
||||
|
||||
Here's an example. 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.
|
||||
|
||||
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/JjJXZVz?height=300&default-tab=html%2Cresult&slug-hash=JjJXZVz&editable=true&user=TheOdinProjectExamples&name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_JjJXZVz"></iframe>
|
||||
|
||||
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.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What property is best used to align flex items along the horizontal axis?
|
||||
What is the default behavior of `flex-shrink` when applied to flex items?
|
||||
|
||||
## --answers--
|
||||
|
||||
`align-items`
|
||||
It prevents any item from shrinking.
|
||||
|
||||
---
|
||||
|
||||
`flex-start`
|
||||
It makes all items shrink at an equal rate.
|
||||
|
||||
---
|
||||
|
||||
`justify-content`
|
||||
It causes only specific items to shrink.
|
||||
|
||||
---
|
||||
|
||||
`align-content`
|
||||
It enlarges the items' sizes equally.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
2
|
||||
|
||||
@@ -6,31 +6,35 @@ dashedName: introduction-flexbox-question-h
|
||||
---
|
||||
# --description--
|
||||
|
||||
Search through <a href="https://www.freecodecamp.org/news/the-css-flexbox-handbook" target="_blank">our handbook</a> and find the answer to the question below.
|
||||
No matter which direction you're using, you need to think of your flex-containers as having 2 axes: the main axis and the cross axis. It is the direction of these axes that changes when the `flex-direction` is changed. In most circumstances, `flex-direction: row` puts the main axis horizontal (left-to-right), and `column` puts the main axis vertical (top-to-bottom).
|
||||
|
||||
In other words, in our very first example, you put `display: flex` on a div and it arranged its children horizontally. This is a demonstration of `flex-direction: row`, the default setting. The following example is very similar. If you uncomment the line that says `flex-direction: column`, those divs will stack vertically.
|
||||
|
||||
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&default-tab=html%2Cresult&slug-hash=BaZKPdw&editable=true&user=TheOdinProjectExamples&name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
What property is used to align a flex item independently of its parent?
|
||||
Which CSS property changes the main axis direction in flex containers to arrange items from top to bottom?
|
||||
|
||||
## --answers--
|
||||
|
||||
`place-content`
|
||||
`align-items`
|
||||
|
||||
---
|
||||
|
||||
`align-self`
|
||||
`flex-flow`
|
||||
|
||||
---
|
||||
|
||||
`flex-direction`
|
||||
|
||||
---
|
||||
|
||||
`justify-content`
|
||||
|
||||
---
|
||||
|
||||
`align-items`
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
2
|
||||
3
|
||||
|
||||
@@ -6,31 +6,39 @@ dashedName: introduction-flexbox-question-i
|
||||
---
|
||||
# --description--
|
||||
|
||||
Search through <a href="https://www.freecodecamp.org/news/the-css-flexbox-handbook" target="_blank">our handbook</a> and find the answer to the question below.
|
||||
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/BaZKPdw?height=400&default-tab=html%2Cresult&slug-hash=BaZKPdw&editable=true&user=TheOdinProjectExamples&name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_BaZKPdw"></iframe>
|
||||
|
||||
One thing to note is that in this example, `flex-direction: column` would not work as expected if you used the shorthand `flex: 1`. Try it out now (i.e. go change the flex value on the `flex: 1 1 auto;` line). Can you figure out why it does not work if `flex: 1` is used? The divs collapse, even though they clearly have a height defined there.
|
||||
|
||||
The reason for this is that the flex shorthand expands `flex-basis` to `0`, which means that all `flex-growing` and `flex-shrinking` would begin their calculations from 0. Empty divs by default have 0 height, so for our flex items to fill up the height of their container, they don't actually need to have any height at all.
|
||||
|
||||
The example above fixed this by specifying `flex: 1 1 auto`, telling the flex items to default to their given height. You could also have fixed it by putting a `height` on the parent `.flex-container`, or by using `flex-grow: 1` instead of the shorthand.
|
||||
|
||||
Another detail to notice: when you changed the `flex-direction` to `column`, `flex-basis` refers to `height` instead of `width`. Given the context this may be obvious, but it's something to be aware of.
|
||||
|
||||
# --question--
|
||||
|
||||
## --text--
|
||||
|
||||
Which property is used to align flex items in a column instead of a row?
|
||||
Why does using `flex: 1` shorthand with `flex-direction: column` lead to collapsed divs in the example described?
|
||||
|
||||
## --answers--
|
||||
|
||||
`flex-wrap`
|
||||
The `flex` shorthand defaults `flex-basis` to 0, disregarding the defined height of the divs.
|
||||
|
||||
---
|
||||
|
||||
`align-items`
|
||||
The `flex` shorthand overrides the specified `flex-direction`, causing collapsing.
|
||||
|
||||
---
|
||||
|
||||
`flex-basis`
|
||||
`flex: 1` only works in a row-based layout, not in a column-based one.
|
||||
|
||||
---
|
||||
|
||||
`flex-direction`
|
||||
The `flex-basis` property becomes fixed to the width, ignoring the height in column layout.
|
||||
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
1
|
||||
|
||||
@@ -6,29 +6,45 @@ dashedName: introduction-flexbox-question-j
|
||||
---
|
||||
# --description--
|
||||
|
||||
Search through <a href="https://www.freecodecamp.org/news/the-css-flexbox-handbook" target="_blank">our handbook</a> and find the answer to the question below.
|
||||
Let's look at an example.
|
||||
|
||||
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&default-tab=html%2Cresult&slug-hash=MWoyBzR&editable=true&user=TheOdinProjectExamples&name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
|
||||
|
||||
You should be able to predict what happens if you put `flex: 1` on the `.item` by now. Give it a shot before you move on!
|
||||
|
||||
Adding `flex: 1` to `.item` makes each of the items grow to fill the available space, but what if you wanted them to stay the same width, but distribute themselves differently inside the container? You can do this!
|
||||
|
||||
Remove `flex: 1` from `.item` and add `justify-content: space-between` to `.container`. Doing so should give you something like this:
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/495704c6eb6bf33bc927534f231533a82b27b2ac/html_css/v2/foundations/flexbox/imgs/07.png" alt="an image displaying three blue squares which are spread out over the entire width of it's container">
|
||||
|
||||
`justify-content` aligns items across the **main axis**. There are a few values that you can use here. You'll learn the rest of them in the reading assignments, but for now try changing it to center, which should center the boxes along the main axis.
|
||||
|
||||
# --question--
|
||||
|
||||
## --assignment--
|
||||
|
||||
Before moving on to the next lesson, see what is possible with the `justify-content` property. Read this [interactive article on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) and play around with the different values of `justify-content` on the example.
|
||||
|
||||
## --text--
|
||||
|
||||
Which properties should only be used for flex container elements?
|
||||
How does applying `justify-content: space-between` to a flex container affect the positioning of its items?
|
||||
|
||||
## --answers--
|
||||
|
||||
`flex-grow`, `flex-shrink` and `flex-basis`
|
||||
It evenly distributes space between items, pushing the first and last items to the edges.
|
||||
|
||||
---
|
||||
|
||||
`align-items`, `justify-content` and `flex-direction`
|
||||
It centers all items within the container.
|
||||
|
||||
---
|
||||
|
||||
`justify-content`, `align-content` and `align-self`
|
||||
It causes the items to grow to fill available space.
|
||||
|
||||
---
|
||||
|
||||
`align-content`, `order` and `flex-direction`
|
||||
It aligns items to the left side while leaving excessive space on the right side.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
id: 6597b43d854b3fa8e35d66d7
|
||||
title: Introduction to Flexbox Question K
|
||||
challengeType: 15
|
||||
dashedName: introduction-flexbox-question-k
|
||||
---
|
||||
# --description--
|
||||
|
||||
<iframe allowfullscreen="true" allowpaymentrequest="true"
|
||||
style="margin: 15px 0"
|
||||
allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="400" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/MWoyBzR?height=400&default-tab=html%2Cresult&slug-hash=MWoyBzR&editable=true&user=TheOdinProjectExamples&name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_MWoyBzR"></iframe>
|
||||
|
||||
To change the placement of items along the cross axis use `align-items`. Try getting the boxes to the center of the container by adding `align-items: center` to `.container`. The desired result looks like this:
|
||||
|
||||
<img src="https://cdn.statically.io/gh/TheOdinProject/curriculum/495704c6eb6bf33bc927534f231533a82b27b2ac/html_css/v2/foundations/flexbox/imgs/08.png" alt="an image displaying three blue squares which are centered in the middle of the flex container" style="margin: 15px 0">
|
||||
|
||||
Because `justify-content` and `align-items` are based on the main and cross axis of your container, their behavior changes when you change the flex-direction of a flex-container. For example, when you change `flex-direction` to `column`, `justify-content` aligns vertically and `align-items` aligns horizontally. The most common behavior, however, is the default, i.e. `justify-content` aligns items horizontally (because the main axis defaults to horizontal), and `align-items` aligns them vertically. One of the biggest sticking points that beginners have with flexbox is confusion when this behavior changes.
|
||||
|
||||
# --question--
|
||||
|
||||
## --assignment--
|
||||
|
||||
Before moving on to the next lesson, see if you can figure out how `align-items` behaves when you change the `flex-direction` property to `column`.
|
||||
|
||||
## --text--
|
||||
|
||||
When changing the `flex-direction` property to `column` in a flex container, how does `align-items` behave in relation to the flex items?
|
||||
|
||||
## --answers--
|
||||
|
||||
It distributes space between items evenly.
|
||||
|
||||
---
|
||||
|
||||
It aligns items horizontally along the main axis.
|
||||
|
||||
---
|
||||
|
||||
It centers items vertically along the cross axis.
|
||||
|
||||
---
|
||||
|
||||
It aligns items to the start of the container along the cross axis.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
Reference in New Issue
Block a user