jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-26 17:02:27 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): add interactive examples to "What Is CSS Flexbox, and When Should You Use It?" lesson (#63111)

Browse Source
This commit is contained in:
Diem-Trang Pham
2025-10-27 15:57:19 -05:00
committed by GitHub
parent 7c0539b959
commit 3cdf2f1349
1 changed files with 152 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
curriculum/challenges/english/blocks/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md
View File

@@ -5,7 +5,7 @@ challengeType: 19
dashedName: what-is-css-flexbox
---
# --description--
# --interactive--
CSS flexbox is a one-dimensional layout model that allows you to arrange elements in rows and columns within a container. You can also control their order and orientation. Web developers use it to create responsive websites and web applications that adapt to different screen sizes and orientations. We refer to flexbox as a one-dimensional layout model because it focuses on arranging elements along a single axis at a time. The axis can be either horizontal or vertical.
@@ -25,7 +25,18 @@ This is an example with a `main` container and three child `div` elements:
</main>
```
If you set only the `width`, `height`, and `background-color` of these `div` elements in the CSS stylesheet, every child element will be placed on its own row because the container is not flex by default. That is:
If you set only the `width`, `height`, and `background-color` of these `div` elements in the CSS stylesheet, every child element will be placed on its own row because the container is not flex by default.
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<main>
<div id="first-div"></div>
<div id="second-div"></div>
<div id="third-div"></div>
</main>
```
```css
div {
@@ -46,14 +57,46 @@ div {
}
```
:::
But if you add `display: flex` to the `main` container, the `div` elements will be rearranged to fit on the same row and they will shrink if necessary:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<main>
<div id="first-div"></div>
<div id="second-div"></div>
<div id="third-div"></div>
</main>
```
```css
main {
display: flex;
}
div {
width: 80px;
height: 50px;
}
#first-div {
background-color: #4d70b2;
}
#second-div {
background-color: #5c4db2;
}
#third-div {
background-color: #4da3b2;
}
```
:::
By default, a flex container will be a block-level element, so the container itself will be on its own row relative to other elements and containers.
Now that you know more about flex containers and flex items, you should also know about flex properties. These properties determine how flex items will be arranged, resized, and distributed within the flex container. Some of the most commonly used ones are `flex-direction`, `justify-content`, `align-items`, and `flex-wrap`.
@@ -73,22 +116,123 @@ flex-direction: row; /* Default */
To reverse the items in the row, you can use `flex-direction: row-reverse`:
```css
flex-direction: row-reverse;
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<main>
<div id="first-div"></div>
<div id="second-div"></div>
<div id="third-div"></div>
</main>
```
```css
main {
display: flex;
flex-direction: row-reverse;
}
div {
width: 80px;
height: 50px;
}
#first-div {
background-color: #4d70b2;
}
#second-div {
background-color: #5c4db2;
}
#third-div {
background-color: #4da3b2;
}
```
:::
This will reverse the order of the flex items. If you want to align the flex items vertically instead, you just need to set `flex-direction` to `column` in the flex container. This will change the direction of the main axis:
```css
flex-direction: column;
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<main>
<div id="first-div"></div>
<div id="second-div"></div>
<div id="third-div"></div>
</main>
```
Now the `div` elements will be aligned vertically because the main axis will be vertical and the cross axis will be horizontal. You can also reverse the order of the flex items vertically with `flex-direction: column-reverse`:
```css
main {
display: flex;
flex-direction: column;
}
div {
width: 80px;
height: 50px;
}
#first-div {
background-color: #4d70b2;
}
#second-div {
background-color: #5c4db2;
}
#third-div {
background-color: #4da3b2;
}
```
:::
Now the `div` elements will be aligned vertically because the main axis will be vertical and the cross axis will be horizontal.
You can also reverse the order of the flex items vertically with `flex-direction: column-reverse`:
:::interactive_editor
```html
<link rel="stylesheet" href="styles.css">
<main>
<div id="first-div"></div>
<div id="second-div"></div>
<div id="third-div"></div>
</main>
```
```css
flex-direction: column-reverse;
main {
display: flex;
flex-direction: column-reverse;
}
div {
width: 80px;
height: 50px;
}
#first-div {
background-color: #4d70b2;
}
#second-div {
background-color: #5c4db2;
}
#third-div {
background-color: #4da3b2;
}
```
:::
CSS flexbox is a powerful layout model that provides a flexible and efficient way to arrange elements within a container. By understanding the key concepts of flex containers, flex items, and the various flex properties, you can create dynamic and responsive websites that adapt to different screen sizes and orientations.
# --questions--