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

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

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

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

Hint

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

Practice

1. What does the CSS property align-items do in a flex container?

easy

A. It controls the vertical alignment of items inside the container.

B. It changes the background color of the container.

C. It sets the font size of the items.

D. It adds space between items horizontally.

Solution

1. Step 1: Understand the role of align-items

   The align-items property is used inside flex or grid containers to control how items align vertically.

2. Step 2: Compare with other options

   Options B, C, and D describe unrelated CSS properties or effects, so they are incorrect.

3. Final Answer:

   It controls the vertical alignment of items inside the container. -> Option A

4. Quick Check:

   Vertical alignment = align-items [OK]

Hint: Align items = vertical alignment inside flex/grid [OK]

Common Mistakes:

• Confusing align-items with justify-content
• Thinking it changes colors or fonts
• Mixing horizontal and vertical alignment

2. Which of the following is the correct syntax to center items vertically in a flex container using align-items?

easy

A. align-items: justify;

B. align-items: middle;

C. align-items: vertical-center;

D. align-items: center;

Solution

1. Step 1: Recall valid align-items values

   Valid values include center, flex-start, flex-end, and stretch. center centers items vertically.

2. Step 2: Check each option

   Options A, B, and C are not valid CSS values for align-items.

3. Final Answer:

   align-items: center; -> Option D

4. Quick Check:

   Center vertically = align-items: center [OK]

Hint: Use 'center' exactly for vertical centering [OK]

Common Mistakes:

• Using 'middle' instead of 'center'
• Confusing justify-content with align-items
• Adding invalid values like 'vertical-center'

3. Given this CSS and HTML, what will be the vertical alignment of the items inside the flex container?

div.container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

medium

A. Items will be aligned at the bottom of the container.

B. Items will be stretched to fill the container height.

C. Items will be aligned at the top of the container.

D. Items will be centered vertically.

Solution

1. Step 1: Understand align-items: flex-end;

   This value aligns flex items to the bottom edge of the container vertically.

2. Step 2: Apply to container height

   The container is 200px tall, so items will appear at the bottom inside that space.

3. Final Answer:

   Items will be aligned at the bottom of the container. -> Option A

4. Quick Check:

   flex-end = bottom alignment [OK]

Hint: flex-end aligns items to bottom vertically [OK]

Common Mistakes:

• Thinking flex-end means top alignment
• Confusing align-items with justify-content
• Assuming items stretch by default

4. Identify the error in this CSS code that prevents vertical centering of flex items:

div.container {
  display: flex;
  align-items: center
  height: 150px;
}

medium

A. display: flex; should be display: block;.

B. Missing semicolon after align-items: center.

C. height property is invalid inside flex containers.

D. align-items cannot be used without justify-content.

Solution

1. Step 1: Check CSS syntax

   Each CSS property must end with a semicolon. The line align-items: center is missing a semicolon.

2. Step 2: Validate other properties

   display: flex; is correct, height is valid, and align-items works without justify-content.

3. Final Answer:

   Missing semicolon after align-items: center. -> Option B

4. Quick Check:

   CSS lines need semicolons [OK]

Hint: Always end CSS lines with semicolon [OK]

Common Mistakes:

• Forgetting semicolon after property
• Thinking height is invalid in flex
• Believing justify-content is required with align-items

5. You want a grid container where all items stretch vertically to fill their grid area, but one item should be aligned at the top instead. Which CSS setup achieves this?

div.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
div.grid > div.special {
  /* What to add here? */
}

hard

A. align-self: flex-start;

B. justify-self: flex-start;

C. align-self: start;

D. align-items: flex-start;

Solution

1. Step 1: Understand container and item alignment

   The container uses align-items: stretch; to stretch all items vertically by default.

2. Step 2: Override alignment for one item

   To override vertical alignment for a single grid item, use align-self. The correct value for top alignment is start, not flex-start (which is for flexbox).

3. Final Answer:

   align-self: start; -> Option C

4. Quick Check:

   Grid item top align = align-self: start [OK]

Hint: Use align-self: start for grid item top alignment [OK]

Common Mistakes:

• Using flex-start instead of start in grid
• Applying align-items on item instead of align-self
• Confusing justify-self with vertical alignment