Tailwind CSS - Align Content

Tailwind CSS: Align Content

The align-content utilities in Tailwind CSS are used to control how lines are spaced in a multi-line flexbox or grid container. It has no effect on single-line containers.

Key Distinction: align-content vs. align-items

This is a common point of confusion for beginners. Remember this rule:

• align-items: Aligns items within a single line along the cross-axis.
• align-content: Aligns the entire group of lines within the container along the cross-axis.

You will only see align-content take effect when your container has extra space in its cross-axis and your items have wrapped onto multiple lines (for flexbox) or you have defined rows with extra space (for grid).

Align Content Classes

Here are the utility classes for controlling the alignment of content lines.

Class	CSS Properties
content-normal	align-content: normal;
content-center	align-content: center;
content-start	align-content: flex-start;
content-end	align-content: flex-end;
content-between	align-content: space-between;
content-around	align-content: space-around;
content-evenly	align-content: space-evenly;
content-baseline	align-content: baseline;
content-stretch	align-content: stretch; (default for grid)

Practical Example: A Multi-line Flex Container

This example uses a flex-wrap container to demonstrate how different align-content utilities distribute the rows of items vertically. Each container has a fixed height to make the effect visible.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Align Content Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold mb-6">Align Content in a Flex Container</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Example: content-start -->
      <div>
        <h2 class="font-semibold mb-2">`content-start`</h2>
        <div class="h-48 bg-white rounded shadow p-2 flex flex-wrap content-start">
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">1</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">2</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">3</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">4</div>
        </div>
      </div>

      <!-- Example: content-center -->
      <div>
        <h2 class="font-semibold mb-2">`content-center`</h2>
        <div class="h-48 bg-white rounded shadow p-2 flex flex-wrap content-center">
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">1</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">2</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">3</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">4</div>
        </div>
      </div>

      <!-- Example: content-end -->
      <div>
        <h2 class="font-semibold mb-2">`content-end`</h2>
        <div class="h-48 bg-white rounded shadow p-2 flex flex-wrap content-end">
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">1</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">2</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">3</div>
          <div class="bg-cyan-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">4</div>
        </div>
      </div>

      <!-- Example: content-between -->
      <div>
        <h2 class="font-semibold mb-2">`content-between`</h2>
        <div class="h-48 bg-white rounded shadow p-2 flex flex-wrap content-between">
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">1</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">2</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">3</div>
          <div class="bg-violet-500 text-white w-20 h-12 m-1 flex items-center justify-center rounded">4</div>
        </div>
      </div>

    </div>
  </div>
</body>
</html>

When to Use Align Content

• Tag Clouds: When creating a cloud of tags that wrap onto multiple lines, content-center can vertically center the entire group of tags within its container.
• Flexible Card Grids: In a grid of cards, content-evenly or content-around can ensure that rows of cards are spaced nicely, even if the container’s height changes.
• Form Layouts: When laying out form fields that may wrap on smaller screens, content-start ensures they stay packed at the top, maintaining a predictable layout.

Debugging Tip

If align-content doesn’t seem to be working, check these two things first:

1. Does your container have flex-wrap (for flexbox)?
2. Does your container have extra vertical space (a height greater than the combined height of its content)?