Why flexbox is needed in CSS - See It in Action

Why Flexbox is Needed

📖 Scenario: You are creating a simple webpage layout that needs to arrange boxes in a row. You want the boxes to adjust their size and position nicely when the browser window changes size, like how books on a shelf can move closer or farther apart to fit the shelf.

🎯 Goal: Build a basic webpage layout using Flexbox to arrange three colored boxes in a row that respond well to different screen sizes.

📋 What You'll Learn

Create a container that holds three boxes

Use Flexbox to arrange the boxes horizontally

Make sure the boxes resize or reposition nicely when the browser window changes width

Add distinct background colors to each box for clear visibility

💡 Why This Matters

🌍 Real World

Websites need to look good on phones, tablets, and desktops. Flexbox helps arrange content so it adapts smoothly to different screen sizes.

💼 Career

Knowing Flexbox is essential for front-end developers to build responsive and user-friendly web layouts quickly and efficiently.

1

Create the HTML structure with a container and three boxes

Write the HTML code to create a <div> with the class container that contains three child <div> elements with classes box1, box2, and box3 respectively.

CSS

Need a hint?

Use <div> tags with the specified class names inside the container.

2

Add basic CSS to style the boxes with colors and size

Write CSS to give .box1 a red background, .box2 a green background, and .box3 a blue background. Also set each box to have a width of 100px and height of 100px.

CSS

  Box 1
  Box 2
  Box 3



  /* Add background colors and size for boxes */

Need a hint?

Use CSS selectors for each box class and set background-color, width, and height.

3

Apply Flexbox to the container to arrange boxes horizontally

Add CSS to the .container class to use Flexbox by setting display: flex;. This will arrange the three boxes side by side in a row.

CSS

  Box 1
  Box 2
  Box 3



  .box1 { background-color: red; width: 100px; height: 100px; }
  .box2 { background-color: green; width: 100px; height: 100px; }
  .box3 { background-color: blue; width: 100px; height: 100px; }
  .container {
    /* Use flexbox here */
  }

Need a hint?

Set display: flex; on the container to arrange children in a row.

4

Make the boxes flexible to adjust size on smaller screens

Add CSS to the .box1, .box2, and .box3 classes to allow them to grow and shrink by adding flex: 1 1 auto;. This makes the boxes resize nicely when the browser window changes width.

CSS

  Box 1
  Box 2
  Box 3



  .box1 { background-color: red; width: 100px; height: 100px; /* Make flexible */ }
  .box2 { background-color: green; width: 100px; height: 100px; /* Make flexible */ }
  .box3 { background-color: blue; width: 100px; height: 100px; /* Make flexible */ }
  .container {
    display: flex;
  }

Need a hint?

Add flex: 1 1 auto; to each box to let them grow and shrink.