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.