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

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

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

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

Hint

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

Practice

1. What does setting display: flex; on a container do?

easy

A. It hides the container and its children.

B. It makes the container's text bold.

C. It changes the container's background color.

D. It makes the container a flex container, arranging children in a row or column.

Solution

1. Step 1: Understand the role of display: flex;

   Setting display: flex; on a container activates flexbox layout for its children.

2. Step 2: Effect on child elements

   Children inside a flex container are arranged in a row by default or column if specified.

3. Final Answer:

   It makes the container a flex container, arranging children in a row or column. -> Option D

4. Quick Check:

   Flex container = display: flex [OK]

Hint: Remember: display: flex creates a flexible box container [OK]

Common Mistakes:

• Confusing flex container with hiding elements
• Thinking it changes colors or text styles
• Assuming it only affects text formatting

2. Which of the following is the correct CSS syntax to make a container a flex container?

easy

A. container { display: flex; }

B. container { display: block-flex; }

C. container { flex: display; }

D. container { flex-display: true; }

Solution

1. Step 1: Identify correct CSS property and value

   The correct property to enable flexbox is display with the value flex.

2. Step 2: Check syntax correctness

   container { display: flex; } uses correct CSS syntax: display: flex;. Others are invalid CSS.

3. Final Answer:

   container { display: flex; } -> Option A

4. Quick Check:

   Correct syntax = display: flex [OK]

Hint: Use 'display: flex;' exactly to start flexbox [OK]

Common Mistakes:

• Swapping property and value order
• Using non-existent properties like flex-display
• Adding extra words like 'true' or 'block-flex'

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

 .container { display: flex; } 
 .box { width: 50px; height: 50px; background: red; margin: 5px; } 

<div class='container'> <div class='box'></div> <div class='box'></div> <div class='box'></div> </div>

medium

A. Boxes arranged horizontally in a row with space between them.

B. Boxes stacked vertically in a column.

C. Boxes overlapping each other in the same spot.

D. Boxes hidden because of missing display property.

Solution

1. Step 1: Analyze the container's display property

   The container has display: flex;, which arranges children in a row by default.

2. Step 2: Understand the boxes' layout

   Each box has fixed size and margin, so they appear side by side with space around them.

3. Final Answer:

   Boxes arranged horizontally in a row with space between them. -> Option A

4. Quick Check:

   Flex default direction = row [OK]

Hint: Flex default direction is row, so children line up horizontally [OK]

Common Mistakes:

• Assuming flex defaults to column
• Thinking boxes overlap without positioning
• Ignoring margin spacing between boxes

4. What is wrong with this CSS if the flex container does not arrange items in a row?

.container {
  display: flex;
  flex-direction: column;
}

medium

A. Flex container needs 'flex-wrap: wrap;' to arrange items.

B. Missing semicolon after display: flex;

C. The value 'column' is wrong; it should be 'row'.

D. Flexbox requires 'display: flexbox;' not 'display: flex;'.

Solution

1. Step 1: Check the flex-direction property value

   The value 'column' arranges children vertically instead of horizontally.

2. Step 2: Correct the value to 'row'

   Changing 'column' to 'row' fixes the layout to arrange items horizontally.

3. Final Answer:

   The value 'column' is wrong; it should be 'row'. -> Option C

4. Quick Check:

   flex-direction: row for horizontal [OK]

Hint: Use 'flex-direction: row' for horizontal layout [OK]

Common Mistakes:

• Using 'column' instead of 'row' for horizontal layout
• Confusing flex and flexbox in display
• Assuming flex-wrap controls direction

5. You want a flex container to stack its child items vertically and center them horizontally. Which CSS achieves this?

hard

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

B. .container { display: flex; flex-direction: column; align-items: center; }

C. .container { display: flex; flex-wrap: wrap; align-content: center; }

D. .container { display: block; text-align: center; }

Solution

1. Step 1: Set flex-direction to column for vertical stacking

   Using flex-direction: column; stacks children vertically.

2. Step 2: Use align-items: center to center horizontally

   align-items: center; centers items along the cross axis (horizontal in column direction).

3. Final Answer:

   .container { display: flex; flex-direction: column; align-items: center; } -> Option B

4. Quick Check:

   Column + align-items center = vertical stack + horizontal center [OK]

Hint: Use flex-direction column + align-items center for vertical center [OK]

Common Mistakes:

• Using row direction when vertical stack needed
• Confusing justify-content with align-items for cross axis
• Using display block instead of flex