Flex container activation in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the container a flex container 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'

Ainline

Bblock

Cgrid

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'block' or 'inline' classes instead of 'flex'.

Using 'grid' which activates grid layout, not flexbox.

Using the flex class in Tailwind CSS activates the flex container behavior.

2fill in blank

medium

Complete the code to make the flex container arrange items in a row 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'

Aflex-row

Bflex-col

Cflex-wrap

Ditems-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex-col' which arranges items in a column.

Using 'items-center' which aligns items vertically but does not set direction.

The flex-row class arranges flex items horizontally in a row.

3fill in blank

hard

Fix the error in the code to properly activate the flex container with Tailwind CSS.

Tailwind

<section class="[1]">
  <p>Content inside flex container</p>
</section>

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

Aflex

Bflexbox

Cflex-container

Dflex-item

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flexbox' or 'flex-container' which are not valid Tailwind classes.

Using 'flex-item' which is not a container class.

The correct Tailwind CSS class to activate flex container is flex. Other options are invalid classes.

4fill in blank

hard

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

Tailwind

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

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

Aflex

Bitems-center

Cjustify-center

Dcontent-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'items-center' alone without 'flex'.

Using 'content-center' which affects multi-line flex containers.

The flex class activates the flex container. The justify-center class centers items horizontally.

5fill in blank

hard

Fill all three blanks to create a flex container that arranges items in a column and wraps items if needed.

Tailwind

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

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

Aflex

Bflex-col

Cflex-wrap

Ditems-center

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to activate flex with 'flex'.

Using 'items-center' instead of 'flex-wrap' for wrapping behavior.

flex activates the flex container, flex-col arranges items vertically in a column, and flex-wrap allows items to wrap to the next line if needed.