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

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 */

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 */
  }

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;
  }

Hint

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

Practice

1. Why do web developers use flexbox in CSS?

easy

A. To create animations on buttons

B. To add colors and fonts to text

C. To easily arrange items in rows or columns with flexible sizes

D. To load images faster on a webpage

Solution

1. Step 1: Understand the purpose of flexbox

   Flexbox is designed to help arrange items in a container either in a row or a column with flexible sizing.

2. Step 2: Compare options with flexbox features

   Options B, C, and D relate to styling or performance, not layout arrangement, which is flexbox's main use.

3. Final Answer:

   To easily arrange items in rows or columns with flexible sizes -> Option C

4. Quick Check:

   Flexbox = flexible layout arrangement [OK]

Hint: Flexbox is about flexible layout, not colors or animations [OK]

Common Mistakes:

• Confusing flexbox with styling text or images
• Thinking flexbox speeds up loading
• Believing flexbox creates animations

2. Which CSS property correctly activates flexbox on a container?

easy

A. display: block;

B. display: flex;

C. position: flex;

D. flex-direction: row;

Solution

1. Step 1: Identify the property that enables flexbox

   The display property with value flex activates flexbox on a container.

2. Step 2: Check other options for correctness

   display: block; is normal block layout, position: flex; is invalid, and flex-direction controls direction but does not activate flexbox.

3. Final Answer:

   display: flex; -> Option B

4. Quick Check:

   Activate flexbox = display: flex [OK]

Hint: Flexbox starts with display: flex; always [OK]

Common Mistakes:

• Using display: block instead of flex
• Trying to use position: flex which is invalid
• Confusing flex-direction with activation

3. Given this CSS and HTML, what will be the layout of the boxes?

div.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

medium

A. Boxes stacked vertically, centered horizontally

B. Boxes arranged in a row, aligned to the left

C. Boxes stacked vertically, aligned to the left

D. Boxes arranged in a row, centered horizontally

Solution

1. Step 1: Analyze flex container properties

   The container uses display: flex; with flex-direction: row;, so items are in a horizontal row.

2. Step 2: Understand justification

   justify-content: center; centers the row of boxes horizontally inside the container.

3. Final Answer:

   Boxes arranged in a row, centered horizontally -> Option D

4. Quick Check:

   flex-direction: row + justify-content: center = centered row [OK]

Hint: Row direction + justify-content center means horizontal center [OK]

Common Mistakes:

• Thinking flex-direction: row stacks vertically
• Ignoring justify-content effect
• Confusing alignment with stacking

4. What is wrong with this CSS if the items do not align in a row?

.box-container {
  display: flex;
  flex-direction: row;
  justify-content: center
}

medium

A. Missing semicolon after justify-content property

B. Wrong value for display property

C. flex-direction should be column

D. justify-content cannot be center

Solution

1. Step 1: Check CSS syntax carefully

   The justify-content: center line is missing a semicolon at the end, which breaks CSS parsing.

2. Step 2: Understand impact of missing semicolon

   Without the semicolon, the browser may ignore this and following styles, causing layout issues.

3. Final Answer:

   Missing semicolon after justify-content property -> Option A

4. Quick Check:

   Missing semicolon breaks CSS rules [OK]

Hint: Always end CSS lines with semicolons [OK]

Common Mistakes:

• Forgetting semicolon after last property
• Changing flex-direction unnecessarily
• Misunderstanding justify-content values

5. You want a navigation bar with menu items spaced evenly across the width, adjusting on small screens. Which flexbox property combination helps achieve this?

hard

A. display: flex; justify-content: space-between; flex-wrap: wrap;

B. display: block; text-align: center; float: left;

C. display: flex; justify-content: center; flex-direction: column;

D. display: grid; grid-template-columns: repeat(3, 1fr);

Solution

1. Step 1: Identify flexbox properties for spacing

   justify-content: space-between; spreads items evenly with space between them.

2. Step 2: Ensure responsiveness with wrapping

   flex-wrap: wrap; allows items to move to next line on small screens, keeping layout flexible.

3. Step 3: Check other options

   display: block; text-align: center; float: left; uses block and float which is outdated and not flexible. display: flex; justify-content: center; flex-direction: column; centers items in a column, not spaced horizontally. display: grid; grid-template-columns: repeat(3, 1fr); uses grid, not flexbox.

4. Final Answer:

   display: flex; justify-content: space-between; flex-wrap: wrap; -> Option A

5. Quick Check:

   Space-between + wrap = even spacing + responsiveness [OK]

Hint: Use space-between and wrap for flexible, spaced menus [OK]

Common Mistakes:

• Using block and float instead of flexbox
• Centering items instead of spacing them
• Confusing grid with flexbox