Flex container activation in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does flex class do in Tailwind CSS?

In Tailwind CSS, what is the effect of adding the flex class to a container element?

A It sets the container's display property to <code>flex</code>, enabling flexbox layout.

B It adds margin and padding to the container for spacing.

C It changes the container's position to <code>absolute</code>.

D It applies a grid layout to the container.

💡 Hint

Think about how flexbox layouts start in CSS.

The flex class in Tailwind sets display: flex; on the element, activating flexbox layout. This allows child elements to be arranged in flexible rows or columns.

📝 Syntax

intermediate

Which Tailwind class activates flexbox on a container?

You want to make a <div> a flex container using Tailwind CSS. Which class should you add?

Tailwind

<div class="???">
  <p>Item 1</p>
  <p>Item 2</p>
</div>

A grid

B flex

C block

D inline

💡 Hint

The class name matches the CSS display property value.

The flex class sets display: flex; on the element, making it a flex container.

❓ rendering

advanced

What is the visual result of adding flex to a container with multiple children?

Given this HTML and Tailwind CSS, what will you see in the browser?

Tailwind

<div class="flex border border-gray-400 p-4">
  <div class="bg-blue-500 text-white p-2">Box 1</div>
  <div class="bg-green-500 text-white p-2">Box 2</div>
  <div class="bg-red-500 text-white p-2">Box 3</div>
</div>

A Only one colored box visible because others are hidden.

B Three colored boxes stacked vertically inside a bordered container.

C Three colored boxes overlapping each other inside a bordered container.

D Three colored boxes arranged side by side in a row inside a bordered container.

💡 Hint

Flexbox default direction is row.

The flex class makes the container a flexbox with default row direction, so child boxes appear side by side horizontally.

❓ selector

advanced

Which Tailwind class combination makes a flex container with vertical stacking?

You want a flex container that stacks its children vertically. Which class combination achieves this?

A block flex-col

B flex flex-row

C flex flex-col

D grid grid-cols-1

💡 Hint

Flex direction controls stacking direction.

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

❓ accessibility

expert

How to ensure keyboard users can navigate flex container items properly?

You have a flex container with interactive child elements. What is the best practice to ensure keyboard accessibility?

A Ensure each child element is focusable with <code>tabindex</code> or native focus, and use semantic HTML elements.

B Add <code>aria-hidden="true"</code> to all child elements to hide them from screen readers.

C Use only <code>div</code> elements without any focus or ARIA attributes.

D Disable keyboard navigation by setting <code>tabindex="-1"</code> on all children.

💡 Hint

Think about how keyboard users interact with page elements.

For accessibility, interactive elements inside flex containers should be focusable and use semantic HTML so keyboard users can navigate them easily.