Flex wrap in CSS - Mini Project: Build & Apply

Flex Wrap with CSS Flexbox

📖 Scenario: You are creating a simple product gallery for a website. The gallery should show product boxes in a row. When the screen is too narrow, the boxes should wrap to the next line instead of shrinking too small.

🎯 Goal: Build a flex container that wraps its child product boxes onto multiple lines when needed, using CSS flex-wrap.

📋 What You'll Learn

Create a flex container with exactly three child boxes

Set the container to use flex layout

Add the CSS property flex-wrap: wrap; to allow wrapping

Style the boxes with a fixed width and height so wrapping is visible

💡 Why This Matters

🌍 Real World

Flexbox wrapping is used in real websites to create galleries, menus, and card layouts that adjust nicely on phones and desktops.

💼 Career

Understanding flex-wrap is essential for front-end developers to build flexible, user-friendly interfaces that work on all devices.

1

Create the HTML structure

Write the HTML code to create a <div> with class container that contains exactly three child <div> elements each with class box.

CSS

Need a hint?

Use a <div> with class container and inside it add three <div> elements with class box.

2

Set up the flex container

In CSS, select the class .container and set its display property to flex.

CSS

.container {
  /* Set display to flex here */
}



  Box 1
  Box 2
  Box 3

Need a hint?

Use display: flex; inside the .container CSS rule.

3

Add flex-wrap property

Add the CSS property flex-wrap: wrap; inside the .container CSS rule to allow the child boxes to wrap onto the next line when needed.

CSS

.container {
  display: flex;
  /* Add flex-wrap: wrap; here */
}



  Box 1
  Box 2
  Box 3

Need a hint?

Write flex-wrap: wrap; inside the .container CSS block.

4

Style the boxes with fixed size

Add CSS rules for the class .box to set width to 10rem, height to 10rem, background color to #4CAF50, margin to 0.5rem, and text color to white.

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

/* Style the boxes below */
.box {
  /* Your code here */
}



  Box 1
  Box 2
  Box 3

Need a hint?

Set fixed width and height with 10rem, background color to green #4CAF50, margin 0.5rem, and text color white inside .box.