Align content in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to center the content horizontally inside a flex container.

CSS

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

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

Acenter

Bleft

Ctop

Dbottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left' or 'top' which are not valid values for justify-content.

Confusing justify-content with align-items.

The justify-content: center; centers flex items horizontally inside the container.

2fill in blank

medium

Complete the code to align content to the end vertically inside a flex container.

CSS

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

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

Astart

Bcenter

Cend

Dstretch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' or 'center' which align differently.

Confusing justify-content with align-items.

The justify-content: end; aligns the flex items to the end of the container vertically when flex-direction is column.

3fill in blank

hard

Fix the error in the code to properly align content to space between lines in a multi-line flex container.

CSS

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

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

Aspace-between

Bspace-evenly

Cspace-around

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'space-around' which adds space around lines including edges.

Using 'space-evenly' which adds equal space around all lines.

The correct value to distribute space evenly between flex lines is space-between.

4fill in blank

hard

Fill both blanks to create a flex container that wraps and aligns content stretched across the cross axis.

CSS

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

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

Awrap

Bnowrap

Cstretch

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Setting flex-wrap to nowrap which prevents wrapping.

Using align-content values like center which do not stretch lines.

Using flex-wrap: wrap; allows items to wrap onto multiple lines, and align-content: stretch; stretches the lines to fill the container.

5fill in blank

hard

Fill all three blanks to create a flex container that wraps, aligns content to the start, and justifies content to the center.

CSS

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

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

Anowrap

Bwrap

Ccenter

Dstart

Attempts:

3 left

💡 Hint

Common Mistakes

Using nowrap which disables wrapping.

Confusing align-content and justify-content values.

Setting flex-wrap: wrap; allows wrapping, align-content: start; aligns lines at the start of the cross axis, and justify-content: center; centers items horizontally.