Flex container in CSS - Mini Project: Build & Apply

Flex Container Layout

📖 Scenario: You are creating a simple webpage section that displays three colored boxes side by side. You want to use CSS Flexbox to arrange these boxes in a row with equal spacing.

🎯 Goal: Build a flex container that arranges three boxes horizontally with space between them.

📋 What You'll Learn

Create a container element in HTML to hold the boxes

Use CSS to make the container a flex container

Arrange the boxes in a row with space between them

Ensure the boxes have visible background colors and fixed size

💡 Why This Matters

🌍 Real World

Flexbox is widely used in web design to create flexible and responsive layouts that adjust to different screen sizes.

💼 Career

Understanding flex containers is essential for front-end developers to build modern, user-friendly websites and applications.

1

Create the HTML structure with three boxes

Write the HTML code to create a <div> with class container that contains three child <div> elements with classes box1, box2, and box3. Each box should have text inside: "Box 1", "Box 2", and "Box 3" respectively.

CSS

Need a hint?

Use a <div> with class container and inside it add three <div> elements with classes box1, box2, and box3. Put the text "Box 1", "Box 2", and "Box 3" inside each box respectively.

2

Add CSS to make the container a flex container

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

CSS

  Box 1
  Box 2
  Box 3


/* Your CSS here */

Need a hint?

Use the CSS selector .container and set display: flex; inside its block.

3

Arrange boxes in a row with space between

Add CSS to the .container to set justify-content to space-between so the boxes spread out evenly in a row.

CSS

  Box 1
  Box 2
  Box 3


.container {
  display: flex;
  /* Your code here */
}

Need a hint?

Inside the .container CSS block, add justify-content: space-between; to spread the boxes evenly.

4

Style the boxes with colors and size

Add CSS rules for .box1, .box2, and .box3 to give each a background color (lightcoral, lightseagreen, lightblue respectively), a fixed width of 6rem, a fixed height of 6rem, and center the text horizontally and vertically using flexbox.

CSS

  Box 1
  Box 2
  Box 3


.container {
  display: flex;
  justify-content: space-between;
}

/* Your code here for .box1, .box2, .box3 */

Need a hint?

For each box class, set the background color, width, height, and use flexbox to center the text horizontally and vertically.