Align items in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to align items vertically in the center inside a flex container.

CSS

.container {
  display: flex;
  align-items: [1];
}

Drag options to blanks, or click blank then click option'

Astretch

Bcenter

Cspace-between

Dflex-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex-start' aligns items at the top, not center.

Using 'space-between' is for spacing items horizontally, not vertical alignment.

Using align-items: center; centers the items vertically inside the flex container.

2fill in blank

medium

Complete the code to align items at the bottom inside a flex container.

CSS

.box {
  display: flex;
  align-items: [1];
}

Drag options to blanks, or click blank then click option'

Acenter

Bbaseline

Cflex-end

Dstretch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'center' centers items vertically, not bottom.

Using 'baseline' aligns items by their text baseline, not bottom.

align-items: flex-end; moves items to the bottom of the flex container vertically.

3fill in blank

hard

Fix the error in the code to properly align items at the top inside a flex container.

CSS

.container {
  display: flex;
  align-items: [1];
}

Drag options to blanks, or click blank then click option'

Aflex-start

Bbottom

Ccenter

Dmiddle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bottom' or 'middle' which are not valid CSS values for align-items.

Confusing 'justify-content' with 'align-items'.

The correct value to align items at the top is flex-start. Values like 'bottom' or 'middle' are invalid for align-items.

4fill in blank

hard

Fill both blanks to create a flex container that aligns items at the baseline.

CSS

.flex-container {
  display: [1];
  align-items: [2];
}

Drag options to blanks, or click blank then click option'

Aflex

Bblock

Cbaseline

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' or 'inline' for display disables flex behavior.

Using 'stretch' instead of 'baseline' changes vertical alignment.

Setting display: flex; creates a flex container. align-items: baseline; aligns items along their text baseline.

5fill in blank

hard

Fill all three blanks to create a flex container that justifies content to space between, and sets the flex direction to row.

CSS

.container {
  display: [1];
  justify-content: [2];
  flex-direction: [3];
}

Drag options to blanks, or click blank then click option'

Ablock

Bspace-between

Crow

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' instead of 'flex' disables flex layout.

Using 'column' instead of 'row' changes the direction vertically.

display: flex; creates a flex container. justify-content: space-between; spaces items evenly horizontally. flex-direction: row; arranges items in a row.

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