Align items (cross axis) in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which Tailwind class aligns items to the center on the cross axis?

You have a flex container. Which Tailwind CSS class will center the items vertically (cross axis)?

Tailwind

<div class="flex h-32 border border-gray-400">
  <div class="bg-blue-500 text-white p-2">Item 1</div>
  <div class="bg-green-500 text-white p-2">Item 2</div>
</div>

A items-center

B justify-center

C content-center

D self-center

💡 Hint

Think about the cross axis alignment in flexbox, not the main axis.

items-center aligns all flex items along the cross axis (vertical if flex-row). justify-center aligns items along the main axis (horizontal if flex-row). content-center aligns lines of items in multi-line flex containers. self-center aligns a single item, not all.

❓ rendering

intermediate

What is the visual result of this Tailwind code?

Given this HTML, how are the items aligned vertically inside the flex container?

Tailwind

<div class="flex items-start h-24 border border-gray-400">
  <div class="bg-red-500 text-white p-2">A</div>
  <div class="bg-yellow-500 text-black p-2">B</div>
  <div class="bg-green-500 text-white p-2">C</div>
</div>

A All items aligned at the center vertically

B All items aligned at the top of the container

C All items aligned at the bottom of the container

D Items stretched to fill container height

💡 Hint

The class items-start controls cross axis alignment.

The items-start class aligns all flex items to the start of the cross axis, which is the top when flex direction is row.

🧠 Conceptual

advanced

Which Tailwind class aligns a single flex item to the center on the cross axis?

You want only one item inside a flex container to be vertically centered, while others remain at the top. Which class should you add to that item?

Tailwind

<div class="flex items-start h-24 border border-gray-400">
  <div class="bg-purple-500 text-white p-2">Item 1</div>
  <div class="bg-pink-500 text-white p-2">Item 2</div>
  <div class="bg-indigo-500 text-white p-2">Item 3</div>
</div>

A self-center

B content-center

C justify-center

D items-center

💡 Hint

This class affects only one item, not the whole container.

self-center aligns a single flex item on the cross axis independently of the container's items-* setting.

❓ layout

advanced

How does items-stretch affect flex items?

In a flex container with fixed height, what does the Tailwind class items-stretch do to the items?

Tailwind

<div class="flex items-stretch h-32 border border-gray-400">
  <div class="bg-teal-500 text-white p-2">Box 1</div>
  <div class="bg-orange-500 text-white p-2">Box 2</div>
</div>

A Items center vertically but keep original height

B Items align at the bottom of the container

C Items keep their original height and align at the top

D Items stretch to fill the container height

💡 Hint

Stretch means fill the available space on the cross axis.

items-stretch makes flex items grow to fill the container's height (cross axis) if no fixed height is set on the items themselves.

❓ accessibility

expert

Which alignment choice improves keyboard navigation and screen reader clarity in a flex container?

You have a horizontal navigation bar with flex items. Which cross axis alignment helps maintain consistent focus order and clear reading for screen readers?

Tailwind

<nav class="flex items-center h-12 bg-gray-100">
  <a href="#home" class="px-4">Home</a>
  <a href="#about" class="px-4">About</a>
  <a href="#contact" class="px-4">Contact</a>
</nav>

A items-end to align links at the bottom

B items-start to align links at the top

C items-center to keep all links vertically aligned

D items-stretch to fill the container height

💡 Hint

Consistent vertical alignment helps users track focus visually and logically.

Using items-center keeps all navigation links aligned vertically, making keyboard focus easier to follow and screen readers interpret the layout clearly. Misaligned items can confuse users relying on keyboard or assistive tech.