jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-26 22:01:30 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): add interactive examples to CSS Flexbox review (#65397)

Browse Source 
Co-authored-by: zaira <zairahira@gmail.com>
This commit is contained in:
Harsh Vishwakarma
2026-01-26 20:29:43 +05:30
committed by GitHub
parent cc1413d57b
commit 6f5af619c3
1 changed files with 111 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
curriculum/challenges/english/blocks/review-css-flexbox/671a940c69cdee833d4cc312.md
View File

@@ -5,7 +5,7 @@ challengeType: 31
dashedName: review-css-flexbox
---
# --description--
# --interactive--
## Introduction to CSS Flexbox and Flex Model
@@ -19,6 +19,32 @@ dashedName: review-css-flexbox
- **`flex-direction: column;`**: This will align the flex items vertically instead of horizontally.
- **`flex-direction: column-reverse;`**: This reverses the order of the flex items vertically.
:::interactive_editor
```html
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
```
```css
.container {
display: flex;
flex-direction: row;
gap: 10px;
}
.box {
background-color: lightblue;
padding: 20px;
text-align: center;
}
```
:::
## The `flex-wrap` Property
- **Definition**: This property determines how flex items are wrapped within a flex container to fit the available space. `flex-wrap` can take three possible values: `nowrap`, `wrap`, and `wrap-reverse`.
@@ -27,10 +53,37 @@ dashedName: review-css-flexbox
- **`flex-wrap: wrap-reverse;`**: This property will wrap flex items in reverse order.
- **`flex-flow` Property**: This property is a shorthand property for `flex-direction` and `flex-wrap`.
```css
flex-flow: column wrap-reverse;
:::interactive_editor
```html
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
```
```css
.container {
display: flex;
flex-wrap: wrap;
width: 150px;
background: #f0f0f0;
}
.box {
width: 60px;
padding: 10px;
margin: 5px;
background: skyblue;
text-align: center;
}
```
:::
## The `justify-content` Property
- **Definition**: This property aligns the child elements along the main axis of the flex container.
@@ -40,6 +93,31 @@ flex-flow: column wrap-reverse;
- **`justify-content: space-between;`**: This will distribute the elements evenly along the main axis.
- **`justify-content: space-around;`**: This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item.
- **`justify-content: space-evenly;`**: This will distribute the items evenly along the main axis.
:::interactive_editor
```html
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
```
```css
.container {
display: flex;
justify-content: space-between;
background: #eee;
}
.box {
padding: 20px;
background: salmon;
}
```
:::
## The `align-items` Property
@@ -48,6 +126,36 @@ flex-flow: column wrap-reverse;
- **`align-items: flex-start;`**: This aligns the items to the start of the cross axis.
- **`align-items: stretch;`**: This is used to stretch the flex items along the cross axis.
:::interactive_editor
```html
<div class="container">
<div class="box tall">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
```
```css
.container {
display: flex;
align-items: center;
height: 150px;
background: #ddd;
}
.box {
background: lightgreen;
padding: 10px;
}
.tall {
height: 100px;
}
```
:::
# --assignment--
Review the CSS Flexbox topics and concepts.