From 2c407b963e81723245fe75c83ffd1a424cbf64ef Mon Sep 17 00:00:00 2001
From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Date: Wed, 6 Nov 2024 02:11:28 -0800
Subject: [PATCH] feat(curriculum): adding content for CSS flexbox review page
 (#57059)

---
 client/i18n/locales/english/intro.json        |  3 +-
 .../671a940c69cdee833d4cc312.md               | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 7a3d2814413..9cf54bcfac2 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -2072,7 +2072,8 @@
       "review-css-flexbox": {
         "title": "CSS Flexbox Review",
         "intro": [
-          "Review the CSS Flexbox concepts to prepare for the upcoming quiz."
+          "Before you are quizzed on CSS Flexbox concepts, you first need to review.",
+          "Open up this page to review concepts like the <code>flex-direction</code>, <code>justify-content</code>, <code>align-items</code>, <code>flex-wrap</code> properties and more."
         ]
       },
       "quiz-css-flexbox": {
diff --git a/curriculum/challenges/english/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/english/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md
index 38d462e02fb..f2a9c2b89c1 100644
--- a/curriculum/challenges/english/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md
+++ b/curriculum/challenges/english/25-front-end-development/review-css-flexbox/671a940c69cdee833d4cc312.md
@@ -9,7 +9,46 @@ dashedName: review-css-flexbox
 
 Review the concepts below to prepare for the upcoming quiz.
 
+## Introduction to CSS Flexbox and Flex Model
 
+- **Definition**: CSS flexbox is a one-dimensional layout model that allows you to arrange elements in rows and columns within a container. 
+- **Flex Model**: This model defines how flex items are arranged within a flex container. Every flex container has two axes: the main axis and the cross axis.
+
+## The `flex-direction` Property
+
+- **Definition**: This property sets the direction of the main axis. The default value of `flex-direction` is `row`, which places all the flex items on the same row, in the direction of your browser’s default language (left to right or right to left). 
+- **`flex-direction: row-reverse;`**: This reverses the items in the row.
+- **`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.
+
+## 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`.
+- **`flex-wrap: nowrap;`**: This is the default value. Flex items won’t be wrapped onto a new line, even if their width exceed the container's width.
+- **`flex-wrap: wrap;`**: This property will wrap the items when they exceed the width of their container.
+- **`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`. In this example, we set `flex-direction` to `column` and `flex-wrap` to `wrap-reverse`.
+
+```css
+flex-flow: column wrap-reverse;
+```
+
+## The `justify-content` Property
+
+- **Definition**: This property aligns the child elements along the main axis of the flex container.
+- **`justify-content: flex-start;`**: In this case, the flex items will be aligned to the start of the main axis. This could be horizontal or vertical.
+- **`justify-content: flex-end;`**: In this case, the flex items are aligned to the end of the main axis, horizontally or vertically.
+- **`justify-content: center;`**: This centers the flex items along the main axis.
+- **`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 distributes the items evenly along the main axis.
+  
+## The `align-items` Property
+
+- **Definition**: This property is used to distribute items along the cross axis. Remember that the cross axis is perpendicular to the main axis.
+- **`align-items: center;`**: This is used to center the items along the cross axis.
+- **`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.
 
 # --assignment--