Align items (cross axis) in Tailwind

Introduction

Aligning items on the cross axis helps you control how elements line up vertically or horizontally inside a container. It makes your layout look neat and balanced.

You want to center buttons vertically inside a navigation bar.

You need to align text and images evenly in a card.

You want to space out items evenly along the vertical axis in a sidebar.

You want to align form fields so their labels line up nicely.

You want to adjust how items stack inside a flex container on different screen sizes.

Syntax

Tailwind

items-start
items-center
items-end
items-baseline
items-stretch

These classes control alignment on the cross axis in a flex container.

Cross axis means vertical if flex direction is row, horizontal if flex direction is column.

Examples

Items align at the top (start) of the container vertically.

Tailwind

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

Items align in the center vertically.

Tailwind

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

Items align at the bottom (end) vertically.

Tailwind

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

Items stretch to fill the container height.

Tailwind

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

Sample Program

This page shows four boxes with three items each. Each box uses a different items-* class to align the items vertically inside a flex container. You can see how items line up at the top, center, bottom, or stretch to fill the container height.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Align Items Cross Axis Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="mb-4 text-lg font-semibold">Align Items (Cross Axis) Demo</h1>

  <section class="mb-8">
    <h2 class="mb-2 font-medium">items-start (top aligned)</h2>
    <div class="flex items-start border border-gray-400 h-24 gap-4 p-2">
      <div class="bg-blue-400 text-white p-2">Item 1</div>
      <div class="bg-green-400 text-white p-4">Item 2</div>
      <div class="bg-red-400 text-white p-6">Item 3</div>
    </div>
  </section>

  <section class="mb-8">
    <h2 class="mb-2 font-medium">items-center (center aligned)</h2>
    <div class="flex items-center border border-gray-400 h-24 gap-4 p-2">
      <div class="bg-blue-400 text-white p-2">Item 1</div>
      <div class="bg-green-400 text-white p-4">Item 2</div>
      <div class="bg-red-400 text-white p-6">Item 3</div>
    </div>
  </section>

  <section class="mb-8">
    <h2 class="mb-2 font-medium">items-end (bottom aligned)</h2>
    <div class="flex items-end border border-gray-400 h-24 gap-4 p-2">
      <div class="bg-blue-400 text-white p-2">Item 1</div>
      <div class="bg-green-400 text-white p-4">Item 2</div>
      <div class="bg-red-400 text-white p-6">Item 3</div>
    </div>
  </section>

  <section>
    <h2 class="mb-2 font-medium">items-stretch (stretch to fill height)</h2>
    <div class="flex items-stretch border border-gray-400 h-24 gap-4 p-2">
      <div class="bg-blue-400 text-white p-2">Item 1</div>
      <div class="bg-green-400 text-white p-4">Item 2</div>
      <div class="bg-red-400 text-white p-6">Item 3</div>
    </div>
  </section>
</body>
</html>

Important Notes

Remember, items-* classes only work inside a flex container.

If your flex direction is flex-col, the cross axis is horizontal, so items-* aligns items left, center, or right.

Use your browser's developer tools to inspect the flex container and see how alignment changes when you toggle these classes.

Summary

Align items controls vertical or horizontal alignment inside flex containers.

Use items-start, items-center, items-end, or items-stretch to change alignment on the cross axis.

It helps make your layouts look balanced and neat.

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