Flex basis and sizing in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the flex basis of the div to 1/3 of the container width using Tailwind CSS.

Tailwind

<div class="flex">
  <div class="[1]">Content</div>
</div>

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

Aflex-1

Bgrow

Cbasis-1/3

Dw-1/3

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex-1 which sets flex-grow, not flex-basis.

Using w-1/3 which sets width, not flex basis.

The basis-1/3 class sets the flex basis to one third of the container width, controlling the initial size of the flex item.

2fill in blank

medium

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

Tailwind

<div class="flex">
  <div class="[1]">Flexible content</div>
</div>

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

Agrow

Bbasis-0

Cshrink

Dbasis-auto

Attempts:

3 left

💡 Hint

Common Mistakes

Using shrink which controls shrinking, not growing.

Using basis-0 which sets basis but does not enable growth.

The grow class allows the flex item to grow and fill available space in the container.

3fill in blank

hard

Fix the error in the code to correctly set the flex basis to 50%.

Tailwind

<div class="flex">
  <div class="[1]">Half width</div>
</div>

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

Abasis-full

Bbasis-50

Cbasis-1/4

Dbasis-1/2

Attempts:

3 left

💡 Hint

Common Mistakes

Using basis-50 which is invalid.

Using basis-full which means 100%.

The correct Tailwind class for 50% flex basis is basis-1/2. basis-50 is not a valid class.

4fill in blank

hard

Fill both blanks to create a flex container with two items: one fixed at 1/4 width and the other growing to fill the rest.

Tailwind

<div class="flex">
  <div class="[1]">Fixed width</div>
  <div class="[2]">Flexible width</div>
</div>

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

Abasis-1/4

Bgrow

Cshrink

Dbasis-auto

Attempts:

3 left

💡 Hint

Common Mistakes

Using shrink instead of grow for flexible item.

Using basis-auto which does not fix width.

The first div uses basis-1/4 to fix its width to 25%. The second uses grow to fill remaining space.

5fill in blank

hard

Fill all three blanks to create a flex container with three items: first fixed at 1/5 width, second grows, third shrinks if needed.

Tailwind

<div class="flex">
  <div class="[1]">Fixed 1/5</div>
  <div class="[2]">Grow</div>
  <div class="[3]">Shrink</div>
</div>

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

Abasis-1/5

Bgrow

Cshrink

Dbasis-auto

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up grow and shrink classes.

Using invalid basis fractions.

The first div uses basis-1/5 for fixed width. The second uses grow to expand. The third uses shrink to reduce size if needed.