Flex grow and shrink in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the flex item grow to fill available space.

Tailwind

<div class="flex">
  <div class="bg-blue-500 [1]">Box</div>
</div>

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

Aflex-grow-1

Bgrow

Cflex-grow

Dflex-grow-full

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex-grow-1' which is not a valid Tailwind class.

Using 'flex-grow' which is incomplete in Tailwind.

Using 'flex-grow-full' which does not exist.

The Tailwind class grow makes the flex item grow to fill available space.

2fill in blank

medium

Complete the code to prevent the flex item from shrinking when the container is too small.

Tailwind

<div class="flex">
  <div class="bg-red-500 [1]">No shrink</div>
</div>

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

Aflex-shrink-0

Bno-shrink

Cshrink-0

Dflex-no-shrink

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex-shrink-0' which is not a Tailwind class.

Using 'no-shrink' which is not recognized by Tailwind.

Using 'flex-no-shrink' which does not exist.

The Tailwind class shrink-0 prevents the flex item from shrinking.

3fill in blank

hard

Fix the error in the flex container to allow items to shrink properly.

Tailwind

<div class="flex [1]">
  <div class="bg-green-400 shrink">Item</div>
</div>

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

Aflex-wrap

Bflex-nowrap

Cflex-shrink

Dflex-grow

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex-nowrap' which prevents wrapping and shrinking.

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

Using 'flex-grow' which affects growth, not wrapping.

The class flex-wrap allows flex items to wrap and shrink properly when needed.

4fill in blank

hard

Fill both blanks to create a flex container with items that grow and do not shrink.

Tailwind

<div class="flex [1]">
  <div class="bg-yellow-300 [2]">Grow no shrink</div>
</div>

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

Aflex-nowrap

Bgrow

Cshrink-0

Dflex-wrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex-wrap' in the container which allows wrapping.

Using 'shrink' instead of 'shrink-0' which allows shrinking.

Using 'grow' in the container instead of the item.

Use flex-nowrap to prevent wrapping and shrink-0 to prevent shrinking of the item.

5fill in blank

hard

Fill all three blanks to create a flex container with items that grow, shrink, and wrap properly.

Tailwind

<div class="flex [1]">
  <div class="bg-purple-400 [2] [3]">Flexible item</div>
</div>

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

Aflex-wrap

Bgrow

Cshrink

Dflex-nowrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex-nowrap' which prevents wrapping.

Using 'shrink-0' which prevents shrinking.

Forgetting to add both grow and shrink classes on the item.

The container uses flex-wrap to allow wrapping. The item uses grow to expand and shrink to shrink when needed.