From 6f5af619c38af19afe3efa1ec4e5bd84f80096f2 Mon Sep 17 00:00:00 2001
From: Harsh Vishwakarma <harsh.entau@gmail.com>
Date: Mon, 26 Jan 2026 20:29:43 +0530
Subject: [PATCH] feat(curriculum): add interactive examples to CSS Flexbox
 review (#65397)

Co-authored-by: zaira <zairahira@gmail.com>
---
 .../671a940c69cdee833d4cc312.md               | 114 +++++++++++++++++-
 1 file changed, 111 insertions(+), 3 deletions(-)

diff --git a/curriculum/challenges/english/blocks/review-css-flexbox/671a940c69cdee833d4cc312.md b/curriculum/challenges/english/blocks/review-css-flexbox/671a940c69cdee833d4cc312.md
index 673bb443c73..3e1bb6b192b 100644
--- a/curriculum/challenges/english/blocks/review-css-flexbox/671a940c69cdee833d4cc312.md
+++ b/curriculum/challenges/english/blocks/review-css-flexbox/671a940c69cdee833d4cc312.md
@@ -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.