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.

Practice

1. What does the Tailwind class items-center do in a flex container?

easy

A. Stretches flex items to fill the container width

B. Aligns flex items horizontally at the start

C. Aligns flex items at the bottom of the container

D. Aligns flex items vertically centered on the cross axis

Solution

1. Step 1: Understand cross axis in flexbox

   The cross axis is perpendicular to the main axis. For a row flex container, it is vertical.

2. Step 2: Identify what items-center does

   items-center centers items along the cross axis, so vertically center in a row.

3. Final Answer:

   Aligns flex items vertically centered on the cross axis -> Option D

4. Quick Check:

   items-center = vertical center [OK]

Hint: Cross axis alignment centers vertically with items-center [OK]

Common Mistakes:

• Confusing main axis with cross axis
• Thinking items-center aligns horizontally
• Mixing items-center with justify-center

2. Which Tailwind class correctly aligns flex items to the bottom on the cross axis?

easy

A. items-end

B. items-stretch

C. items-center

D. items-start

Solution

1. Step 1: Recall cross axis alignment classes

   items-start aligns at the top/start, items-end aligns at the bottom/end, items-center centers, items-stretch stretches.

2. Step 2: Match bottom alignment

   Bottom alignment on cross axis is done by items-end.

3. Final Answer:

   items-end -> Option A

4. Quick Check:

   items-end = bottom align [OK]

Hint: items-end aligns items at the bottom on cross axis [OK]

Common Mistakes:

• Using items-start for bottom alignment
• Confusing items-stretch with bottom alignment
• Mixing justify-end with items-end

3. Given this HTML and Tailwind CSS:

<div class="flex items-start h-32 bg-gray-100">
  <div class="w-16 h-16 bg-blue-500"></div>
  <div class="w-16 h-16 bg-red-500"></div>
</div>

What will be the vertical alignment of the blue and red boxes inside the container?

medium

A. Both boxes centered vertically

B. Both boxes aligned at the top of the container

C. Both boxes aligned at the bottom

D. Boxes stretched to fill container height

Solution

1. Step 1: Analyze the container classes

   The container has flex and items-start. items-start aligns items at the start of the cross axis (top for row).

2. Step 2: Determine item alignment

   Both child divs will align at the top inside the 8rem tall container.

3. Final Answer:

   Both boxes aligned at the top of the container -> Option B

4. Quick Check:

   items-start = top align [OK]

Hint: items-start means top alignment in flex row [OK]

Common Mistakes:

• Assuming items-center aligns top
• Thinking items-start stretches items
• Confusing justify-content with items alignment

4. You want flex items to stretch vertically inside a container but used items-center instead of the correct class. What is the problem?

medium

A. Items will be vertically centered, not stretched

B. Items will align at the bottom instead of stretching

C. Items will not display at all

D. Items will stretch horizontally instead

Solution

1. Step 1: Understand items-center effect

   items-center centers items on the cross axis, so they keep their height and align in the middle.

2. Step 2: Compare with items-stretch

   items-stretch makes items fill the container height, stretching them vertically.

3. Final Answer:

   Items will be vertically centered, not stretched -> Option A

4. Quick Check:

   items-center ≠ stretch [OK]

Hint: Use items-stretch to fill height, not items-center [OK]

Common Mistakes:

• Confusing items-center with items-stretch
• Expecting items-center to fill container height
• Mixing justify-content with items alignment

5. You have a flex container with flex-col and want to align items horizontally centered. Which Tailwind class should you use?

hard

A. items-start

B. justify-center

C. items-center

D. items-end

Solution

1. Step 1: Identify cross axis for flex-col

   With flex-col, the main axis is vertical, so the cross axis is horizontal.

2. Step 2: Choose class for horizontal alignment on cross axis

   items-center aligns items centered on the cross axis, so horizontally centered in this case.

3. Final Answer:

   items-center -> Option C

4. Quick Check:

   flex-col cross axis = horizontal, use items-center [OK]

Hint: For flex-col, items-center centers horizontally [OK]

Common Mistakes:

• Using justify-center for cross axis alignment
• Confusing main and cross axis directions
• Choosing items-end for center alignment