Justify content (main axis) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to center items horizontally using Tailwind CSS.

Tailwind

<div class="flex [1]">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

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

Ajustify-center

Bitems-center

Ccontent-center

Dalign-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using items-center which aligns items vertically (cross axis).

Using content-center which aligns lines, not items.

The justify-center class centers items along the main axis (horizontal in a row flex container).

2fill in blank

medium

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

Tailwind

<div class="flex [1]">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

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

Ajustify-between

Bjustify-evenly

Cjustify-start

Djustify-around

Attempts:

3 left

💡 Hint

Common Mistakes

Using justify-between which adds space only between items, not around.

Using justify-evenly which spaces items evenly but differently than around.

The justify-around class adds equal space around each item on the main axis.

3fill in blank

hard

Fix the error in the code to align items to the end of the main axis.

Tailwind

<div class="flex [1]">
  <div>Left</div>
  <div>Right</div>
</div>

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

Ajustify-right

Bjustify-flex-end

Cjustify-end

Djustify-left

Attempts:

3 left

💡 Hint

Common Mistakes

Using justify-left or justify-right which are not valid Tailwind classes.

Using justify-flex-end which is not a Tailwind class.

The correct Tailwind class to align items to the end on the main axis is justify-end.

4fill in blank

hard

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

Tailwind

<div class="flex [1] [2]">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

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

Ajustify-evenly

Bitems-center

Cjustify-center

Ditems-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using justify-center which centers items but does not space them evenly.

Using items-start which aligns items to the top instead of centering.

justify-evenly spaces items evenly on the main axis, and items-center centers items on the cross axis (vertical).

5fill in blank

hard

Fill all three blanks to create a flex container that aligns items to the start horizontally, centers them vertically, and wraps items to the next line if needed.

Tailwind

<div class="flex [1] [2] [3]">
  <div>Alpha</div>
  <div>Beta</div>
  <div>Gamma</div>
  <div>Delta</div>
</div>

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

Ajustify-start

Bitems-center

Cflex-wrap

Djustify-end

Attempts:

3 left

💡 Hint

Common Mistakes

Using justify-end which aligns items to the right.

Forgetting flex-wrap so items overflow instead of wrapping.

justify-start aligns items to the start horizontally, items-center centers them vertically, and flex-wrap allows items to wrap to the next line.