Why Flexbox is essential in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container a flexbox using Tailwind CSS.

Tailwind

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

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

Agrid

Bblock

Cinline

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using block or inline instead of flex does not enable flexbox.

Using flex class in Tailwind makes the container a flexbox, allowing flexible layout of its children.

2fill in blank

medium

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

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

Dself-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using items-center instead of justify-center centers items vertically.

The justify-center class centers items horizontally inside a flex container.

3fill in blank

hard

Fix the error in the code to make the flex container wrap its items to the next line.

Tailwind

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

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

Aflex-nowrap

Bflex-row

Cflex-wrap

Dflex-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-nowrap keeps all items on one line, causing overflow.

The flex-wrap class allows flex items to wrap onto multiple lines.

4fill in blank

hard

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

Tailwind

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

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

Aflex-col

Bitems-center

Cjustify-center

Dflex-row

Attempts:

3 left

💡 Hint

Common Mistakes

Using justify-center instead of items-center centers items vertically in this case.

flex-col makes the flex direction vertical, and items-center centers items horizontally.

5fill in blank

hard

Fill all three blanks to create a flex container that wraps items, centers them horizontally, and aligns them vertically in the middle.

Tailwind

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

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

Aflex-wrap

Bjustify-center

Citems-center

Dflex-nowrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-nowrap prevents wrapping.

Mixing up justify-center and items-center roles.

flex-wrap allows wrapping, justify-center centers items horizontally, and items-center aligns items vertically.