What is Align items (cross axis) in Tailwind?

Tailwindmarkup~5 mins

Align items (cross axis) in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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>

OutputSuccess

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.