Align items in CSS - Mini Project: Build & Apply

Align Items with Flexbox

📖 Scenario: You are creating a simple webpage section that shows three colored boxes side by side. You want to control how these boxes align vertically inside their container.

🎯 Goal: Build a flex container with three boxes inside it. Use CSS align-items property to align the boxes vertically in the center.

📋 What You'll Learn

Create a container with three child boxes

Use CSS Flexbox on the container

Set align-items to center on the container

Boxes should be visible with distinct background colors

The container and boxes should have fixed height so vertical alignment is visible

💡 Why This Matters

🌍 Real World

Aligning items vertically is common in navigation bars, card layouts, and many UI components to create visually balanced designs.

💼 Career

Understanding flexbox alignment is essential for front-end developers to build responsive and well-structured web pages.

1

Create the HTML structure

Create a <div> with class container and inside it create three <div> elements with classes box1, box2, and box3 respectively.

CSS

Need a hint?

Use three <div> elements inside the container with the exact class names box1, box2, and box3.

2

Set up the container as a flexbox

In CSS, select the class .container and set display: flex; and height: 10rem; to create a flex container with fixed height.

CSS

  
  
  



.container {
  /* Your code here */
}

Need a hint?

Use display: flex; to make the container a flexbox and set a fixed height with height: 10rem;.

3

Add the align-items property

In the CSS for .container, add align-items: center; to vertically center the boxes inside the container.

CSS

  
  
  



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

Need a hint?

Add align-items: center; inside the .container CSS block to align children vertically center.

4

Style the boxes with colors and size

Add CSS rules for .box1, .box2, and .box3 to set their width to 5rem, height to 5rem, and background colors to red, green, and blue respectively.

CSS

  
  
  



.container {
  display: flex;
  height: 10rem;
  align-items: center;
}
.box1 {
  /* Your code here */
}
.box2 {
  /* Your code here */
}
.box3 {
  /* Your code here */
}

Need a hint?

Set each box's width and height to 5rem and give them distinct background colors: red, green, and blue.