Why flexbox is needed in CSS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container a flexbox.

CSS

.container {
  display: [1];
}

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

Aflex

Bblock

Cinline

Dgrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' instead of 'flex' does not create a flex container.

Using 'inline' does not enable flexbox behavior.

Setting display: flex; makes the container a flexbox, enabling flexible layouts.

2fill in blank

medium

Complete the code to align items horizontally in the center using flexbox.

CSS

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

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

Aflex-end

Bflex-start

Cspace-between

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex-start' aligns items to the left, not center.

Using 'space-between' spreads items apart.

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

3fill in blank

hard

Fix the error in the code to make items stack vertically using flexbox.

CSS

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

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

Arow

Bcolumn

Cwrap

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'row' keeps items horizontal.

Using 'wrap' is not a direction but controls wrapping.

flex-direction: column; stacks flex items vertically.

4fill in blank

hard

Fill both blanks to create a flex container that centers items vertically and horizontally.

CSS

.container {
  display: [1];
  align-items: [2];
  justify-content: center;
}

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

Aflex

Bblock

Ccenter

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' or 'inline' for display disables flexbox.

Using 'justify-content' alone does not center vertically.

Use display: flex; to create a flex container and align-items: center; to center items vertically.

5fill in blank

hard

Fill all three blanks to create a flex container with vertical stacking, centered items, and space between them.

CSS

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

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

Ablock

Bflex

Cspace-between

Dcolumn

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' disables flexbox.

Using 'row' stacks items horizontally.

Using 'center' for justify-content centers items but does not add space between.

Set display: flex; to enable flexbox, flex-direction: column; to stack items vertically, and justify-content: space-between; to spread items evenly.