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.

Practice

1. What does the Tailwind class basis-1/3 do in a flex container?

easy

A. Makes the flex item grow to fill one-third of the container

B. Sets the initial size of the flex item to one-third of the container's main size

C. Prevents the flex item from shrinking below one-third of its size

D. Sets the flex item to always be exactly one-third of the container width regardless of content

Solution

1. Step 1: Understand flex basis meaning

   Flex basis sets the starting size of a flex item before growing or shrinking.

2. Step 2: Interpret basis-1/3 in Tailwind

   This class sets the flex basis to one-third of the container's main size, not forcing exact size but initial size.

3. Final Answer:

   Sets the initial size of the flex item to one-third of the container's main size -> Option B

4. Quick Check:

   Flex basis = initial size = one-third [OK]

Hint: Flex basis sets start size, not final size [OK]

Common Mistakes:

• Confusing basis with grow or shrink
• Thinking basis fixes size exactly
• Assuming basis prevents shrinking

2. Which of the following is the correct Tailwind class to set a flex item's basis to 16rem?

easy

A. basis-16rem

B. basis-64rem

C. basis-16

D. basis-64

Solution

1. Step 1: Recall Tailwind sizing scale

   Tailwind uses numeric scale where 64 equals 16rem (4rem * 16).

2. Step 2: Match class syntax

   The correct class is basis-64 to set basis to 16rem, no 'rem' suffix used.

3. Final Answer:

   basis-64 -> Option D

4. Quick Check:

   basis-64 = 16rem in Tailwind [OK]

Hint: Tailwind uses numbers, not units, for spacing [OK]

Common Mistakes:

• Adding 'rem' suffix in class name
• Using wrong numeric scale
• Confusing basis with width classes

3. Given this HTML snippet:

<div class="flex w-96">
  <div class="basis-1/4 bg-blue-500">Box 1</div>
  <div class="basis-1/2 bg-red-500">Box 2</div>
  <div class="basis-1/4 bg-green-500">Box 3</div>
</div>

What will be the width of Box 2 inside the 24rem wide container?

medium

A. 6rem

B. 24rem

C. 12rem

D. 18rem

Solution

1. Step 1: Calculate container width in rem

   The container width is 24rem (w-96 means 24rem).

2. Step 2: Calculate Box 2 basis size

   Box 2 has basis-1/2, so initial size is half of 24rem = 12rem.

3. Final Answer:

   12rem -> Option C

4. Quick Check:

   Half of 24rem = 12rem [OK]

Hint: Multiply container width by basis fraction [OK]

Common Mistakes:

• Confusing basis fraction with grow factor
• Using container width in px instead of rem
• Adding basis sizes instead of calculating individually

4. You wrote this Tailwind code:

<div class="flex">
  <div class="basis-2/3">Item 1</div>
  <div class="basis-1/2">Item 2</div>
</div>

But the items overflow the container width. What is the main reason?

medium

A. The sum of basis sizes (2/3 + 1/2) exceeds 1, causing overflow

B. Missing flex-grow classes to allow shrinking

C. Tailwind does not support fractional basis classes

D. The container needs flex-wrap to prevent overflow

Solution

1. Step 1: Calculate the sum of basis fractions

   2/3 + 1/2 = 4/6 + 3/6 = 7/6 > 1.

2. Step 2: Understand the effect

   When the sum of flex-basis values exceeds 1, it causes the flex items to overflow the container.

3. Final Answer:

   The sum of basis sizes (2/3 + 1/2) exceeds 1, causing overflow -> Option A

4. Quick Check:

   Sum of basis fractions > 1 causes overflow [OK]

Hint: Check if basis fractions sum over 1 for overflow [OK]

Common Mistakes:

• Assuming basis fractions always fit container
• Ignoring default flex shrink behavior
• Confusing grow with shrink effects

5. You want three flex items inside a container to have these widths initially: 25%, 50%, and 25%. You also want the middle item to grow twice as fast as the others when space is available. Which Tailwind classes correctly achieve this?

hard

A. basis-1/4 grow, basis-1/2 [flex-grow:2], basis-1/4 grow

B. basis-1/4 flex-grow-1, basis-1/2 flex-grow-2, basis-1/4 flex-grow-1

C. basis-1/4 grow, basis-1/2 grow [flex-grow:2], basis-1/4 grow

D. basis-1/4 grow, basis-1/2 grow, basis-1/4 grow

Solution

1. Step 1: Set correct basis classes

   Use basis-1/4 for 25% and basis-1/2 for 50% widths.

2. Step 2: Apply grow classes

   Tailwind uses grow for flex-grow:1 and [flex-grow:2] for flex-grow:2.

3. Step 3: Assign grow classes to items

   First and third items get grow, middle item gets [flex-grow:2] to grow twice as fast.

4. Final Answer:

   basis-1/4 grow, basis-1/2 [flex-grow:2], basis-1/4 grow -> Option A

5. Quick Check:

   Use grow and [flex-grow:2] with basis fractions [OK]

Hint: Use grow and [flex-grow:2] classes for different grow rates [OK]

Common Mistakes:

• Using non-existent flex-grow-1 class
• Combining grow and grow-2 on same element
• Forgetting to set basis sizes