Order and self-alignment in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the visual order of items with Tailwind's order classes?

Given this HTML with Tailwind CSS classes, what is the order in which the items appear visually?

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

Tailwind

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

A Item 3, Item 2, Item 1

B Item 1, Item 2, Item 3

C Item 3, Item 1, Item 2

D Item 2, Item 3, Item 1

💡 Hint

Remember, lower order values appear first in flex containers.

Tailwind's order utility sets the CSS order property. Items with lower order values appear before those with higher values. Here, order-1 (Item 2) comes first, then order-2 (Item 3), then order-3 (Item 1).

❓ selector

intermediate

Which Tailwind class aligns a single flex item to the end of the cross axis?

You have a flex container with vertical direction. Which Tailwind class should you add to a single item to align it to the bottom (end) of the container?

A self-end

B items-end

C justify-end

D content-end

💡 Hint

Think about aligning one item, not the whole container.

The 'self-end' class aligns a single flex item to the end of the cross axis. 'items-end' aligns all items, 'justify-end' aligns items along the main axis, and 'content-end' affects multi-line flex containers.

🧠 Conceptual

advanced

What happens if multiple flex items have the same order value in Tailwind?

Consider a flex container where two items have the same order value using Tailwind classes. How does the browser decide their visual order?

A The browser randomly orders them

B They appear in the order they are in the HTML source

C The item with the larger width appears first

D They overlap visually

💡 Hint

Think about the default behavior when order values tie.

When multiple flex items share the same order value, the browser displays them in the order they appear in the HTML source code.

❓ rendering

advanced

What is the vertical position of the green box with 'self-center' in this flex container?

Given this code:

<div class="flex flex-col h-40 border border-gray-400">
  <div class="bg-red-400 h-10">Red</div>
  <div class="bg-green-400 h-10 self-center">Green</div>
  <div class="bg-blue-400 h-10">Blue</div>
</div>

Where will the green box appear vertically inside the container?

Tailwind

<div class="flex flex-col h-40 border border-gray-400">
  <div class="bg-red-400 h-10">Red</div>
  <div class="bg-green-400 h-10 self-center">Green</div>
  <div class="bg-blue-400 h-10">Blue</div>
</div>

A Centered horizontally but stacked vertically in normal order

B Aligned at the bottom of the container

C Centered vertically between Red and Blue boxes

D Stretched to fill the container height

💡 Hint

Remember flex-col means main axis is vertical; self-center aligns on cross axis.

'flex-col' sets the main axis vertically. 'self-center' aligns the item on the cross axis (horizontal), so the green box is centered horizontally but remains in normal vertical order between red and blue.

❓ accessibility

expert

How does changing order with Tailwind affect keyboard navigation and screen readers?

If you use Tailwind's order utilities to visually reorder flex items, what is the impact on keyboard navigation and screen readers?

A Screen readers ignore the content of reordered items

B Keyboard navigation and screen readers follow the visual order set by CSS order

C Keyboard and screen readers follow the HTML source order, ignoring visual order

D Keyboard navigation breaks, but screen readers follow visual order

💡 Hint

Think about how assistive technologies read the page structure.

CSS order changes only visual order. Keyboard navigation and screen readers follow the DOM order in the HTML source, which may differ from visual order, potentially causing confusion if not handled carefully.