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.

Practice

1. What does adding the Tailwind class flex to a container do?

easy

A. It activates the flexbox layout on that container.

B. It hides the container from view.

C. It adds a fixed width to the container.

D. It changes the container's background color.

Solution

1. Step 1: Understand the role of the flex class

   The flex class in Tailwind activates the flexbox layout on the container, enabling flexible arrangement of child items.

2. Step 2: Compare other options

   Other options describe unrelated effects like hiding, fixed width, or color change, which flex does not do.

3. Final Answer:

   It activates the flexbox layout on that container. -> Option A

4. Quick Check:

   Adding flex = activates flexbox [OK]

Hint: Remember: flex turns on flexbox layout [OK]

Common Mistakes:

• Thinking flex hides the container
• Confusing flex with width or color classes
• Assuming flex only styles text

2. Which of the following is the correct Tailwind syntax to activate flexbox on a container?

easy

A. flex

B. flexbox

C. flex-container

D. flex-layout

Solution

1. Step 1: Recall Tailwind's flexbox activation class

   The correct class to activate flexbox in Tailwind is exactly flex.

2. Step 2: Check other options for validity

   Classes like flexbox, flex-container, and flex-layout do not exist in Tailwind.

3. Final Answer:

   flex -> Option A

4. Quick Check:

   Correct class = flex [OK]

Hint: Use exactly flex to enable flexbox [OK]

Common Mistakes:

• Adding extra words like 'box' or 'container' to flex
• Using incorrect class names not in Tailwind
• Confusing with CSS property names

3. Given this HTML snippet:

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

How will the items be arranged visually?

medium

A. Items will be hidden.

B. Items will be arranged side by side in a row.

C. Items will overlap each other.

D. Items will be stacked vertically in a column.

Solution

1. Step 1: Understand the effect of flex and flex-col

   The flex class activates flexbox, and flex-col sets the direction to column, stacking items vertically.

2. Step 2: Visualize the layout

   Because of flex-col, the two divs appear one below the other, not side by side or overlapping.

3. Final Answer:

   Items will be stacked vertically in a column. -> Option D

4. Quick Check:

   flex-col = vertical stack [OK]

Hint: Use flex-col for vertical stacking [OK]

Common Mistakes:

• Assuming default flex direction is column without flex-col
• Thinking items overlap without positioning
• Confusing row and column directions

4. What is wrong with this Tailwind code if the container does not behave as a flex container?

<div class="flex-col">
  <div>A</div>
  <div>B</div>
</div>

medium

A. The container needs block class to work.

B. The class flex-col should be flex-row to activate flexbox.

C. The class flex-col alone does not activate flexbox; flex is missing.

D. The child divs need flex class, not the container.

Solution

1. Step 1: Check if flexbox is activated

   The class flex-col only sets direction but does not activate flexbox. The flex class is required to enable flexbox.

2. Step 2: Verify other options

   flex-row sets direction but also requires flex. block is default display, and child divs do not need flex.

3. Final Answer:

   The class flex-col alone does not activate flexbox; flex is missing. -> Option C

4. Quick Check:

   Missing flex means no flexbox [OK]

Hint: Always add flex to activate flexbox before direction [OK]

Common Mistakes:

• Using flex-col without flex
• Thinking flex-col alone activates flexbox
• Adding flex to children instead of container

5. You want a container to arrange items in a row but wrap to the next line if they don't fit. Which Tailwind classes should you add?

hard

A. flex-col flex-wrap

B. flex flex-wrap

C. flex flex-nowrap

D. block flex-wrap

Solution

1. Step 1: Activate flexbox and set wrapping

   Use flex to activate flexbox with default row direction, and flex-wrap to allow items to wrap to the next line.

2. Step 2: Eliminate incorrect options

   flex-col sets column direction, not row. flex-nowrap disables wrapping. block is not flexbox.

3. Final Answer:

   flex flex-wrap -> Option B

4. Quick Check:

   Row + wrap = flex flex-wrap [OK]

Hint: Combine flex and flex-wrap for wrapping rows [OK]

Common Mistakes:

• Using flex-col when row is needed
• Using flex-nowrap which disables wrapping
• Using block instead of flex