Justify content in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to center the items horizontally using flexbox.

CSS

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

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

Atop

Bleft

Cbottom

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

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

Forgetting to set display to flex.

The justify-content property with value center centers flex items horizontally inside the container.

2fill in blank

medium

Complete the code to space items evenly with equal space around them.

CSS

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

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

Aspace-around

Bspace-between

Cspace-evenly

Dstretch

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing space-between which does not add space at the edges.

Using stretch which is not a valid justify-content value.

The value space-around adds equal space around each item, including the edges.

3fill in blank

hard

Fix the error in the code to align items to the end horizontally.

CSS

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

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

Aright

Bflex-end

Cend

Dbottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'right' which is not a valid justify-content value.

Confusing justify-content with align-items.

The correct value to align flex items to the end is flex-end. Values like right or end are invalid here.

4fill in blank

hard

Fill both blanks to create a flex container that spaces items evenly and wraps them.

CSS

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

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

Aflex

Bspace-evenly

Cblock

Dspace-between

Attempts:

3 left

💡 Hint

Common Mistakes

Using block instead of flex for display.

Choosing space-between which does not add equal space around items.

Setting display to flex enables flexbox. Using space-evenly for justify-content spaces items evenly with equal space around them.

5fill in blank

hard

Fill all three blanks to create a flex container that centers items horizontally, aligns them at the start vertically, and does not wrap.

CSS

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

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

Ablock

Bcenter

Cflex-start

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using block for display which disables flexbox.

Confusing justify-content and align-items values.

Set display to flex to enable flexbox. Use center for justify-content to center items horizontally. Use flex-start for align-items to align items at the top vertically.