Align Content

Controls how rows of content are positioned in a multi-line flex container or a grid container along the cross axis. In a flex column layout, this controls horizontal alignment; in a flex row layout, this controls vertical alignment. This is particularly useful when there are multiple rows of content with extra space in the container. In Tailwind v4, align utilities have improved compatibility with logical properties for better RTL support.

Flexbox & Grid1 variant7 examples

Official Docs Open Playground

Basic usage:

<div class="flex flex-wrap content-start h-64 bg-gray-100 p-4 rounded-lg">
  <div class="w-1/3 p-2"><div class="bg-blue-100 p-4 rounded">1</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-200 p-4 rounded">2</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-300 p-4 rounded">3</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-400 p-4 rounded">4</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-500 p-4 rounded text-white">5</div></div>
</div>

Examples

Multi-line flex with rows aligned to the top of container

<div class="flex flex-wrap content-start h-64 bg-gray-100 p-4 rounded-lg">
  <div class="w-1/3 p-2"><div class="bg-blue-100 p-4 rounded">1</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-200 p-4 rounded">2</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-300 p-4 rounded">3</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-400 p-4 rounded">4</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-500 p-4 rounded text-white">5</div></div>
</div>

Edit in playground

Multi-line flex with rows centered vertically in container

<div class="flex flex-wrap content-center h-64 bg-gray-100 p-4 rounded-lg">
  <div class="w-1/3 p-2"><div class="bg-green-100 p-4 rounded">1</div></div>
  <div class="w-1/3 p-2"><div class="bg-green-200 p-4 rounded">2</div></div>
  <div class="w-1/3 p-2"><div class="bg-green-300 p-4 rounded">3</div></div>
  <div class="w-1/3 p-2"><div class="bg-green-400 p-4 rounded">4</div></div>
  <div class="w-1/3 p-2"><div class="bg-green-500 p-4 rounded text-white">5</div></div>
</div>

Edit in playground

Multi-line flex with rows aligned to the bottom of container

<div class="flex flex-wrap content-end h-64 bg-gray-100 p-4 rounded-lg">
  <div class="w-1/3 p-2"><div class="bg-purple-100 p-4 rounded">1</div></div>
  <div class="w-1/3 p-2"><div class="bg-purple-200 p-4 rounded">2</div></div>
  <div class="w-1/3 p-2"><div class="bg-purple-300 p-4 rounded">3</div></div>
  <div class="w-1/3 p-2"><div class="bg-purple-400 p-4 rounded">4</div></div>
  <div class="w-1/3 p-2"><div class="bg-purple-500 p-4 rounded text-white">5</div></div>
</div>

Edit in playground

Space distributed between rows (first row at top, last at bottom)

<div class="flex flex-wrap content-between h-64 bg-gray-100 p-4 rounded-lg">
  <div class="w-1/3 p-2"><div class="bg-blue-100 p-4 rounded">1</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-200 p-4 rounded">2</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-300 p-4 rounded">3</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-400 p-4 rounded">4</div></div>
  <div class="w-1/3 p-2"><div class="bg-blue-500 p-4 rounded text-white">5</div></div>
</div>

Edit in playground

Space distributed around rows

<div class="flex flex-wrap content-around h-64 bg-gray-100 p-4 rounded-lg">
  <div class="w-1/3 p-2"><div class="bg-green-100 p-4 rounded">1</div></div>
  <div class="w-1/3 p-2"><div class="bg-green-200 p-4 rounded">2</div></div>
  <div class="w-1/3 p-2"><div class="bg-green-300 p-4 rounded">3</div></div>
  <div class="w-1/3 p-2"><div class="bg-green-400 p-4 rounded">4</div></div>
  <div class="w-1/3 p-2"><div class="bg-green-500 p-4 rounded text-white">5</div></div>
</div>

Edit in playground

Space distributed evenly between rows

<div class="flex flex-wrap content-evenly h-64 bg-gray-100 p-4 rounded-lg">
  <div class="w-1/3 p-2"><div class="bg-purple-100 p-4 rounded">1</div></div>
  <div class="w-1/3 p-2"><div class="bg-purple-200 p-4 rounded">2</div></div>
  <div class="w-1/3 p-2"><div class="bg-purple-300 p-4 rounded">3</div></div>
  <div class="w-1/3 p-2"><div class="bg-purple-400 p-4 rounded">4</div></div>
  <div class="w-1/3 p-2"><div class="bg-purple-500 p-4 rounded text-white">5</div></div>
</div>

Edit in playground

Grid with rows aligned to the top

<!-- Grid example with align-content -->
<div class="grid grid-cols-3 content-start gap-4 h-64 bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">1</div>
  <div class="bg-blue-200 p-4 rounded">2</div>
  <div class="bg-blue-300 p-4 rounded">3</div>
  <div class="bg-blue-400 p-4 rounded">4</div>
  <div class="bg-blue-500 p-4 rounded text-white">5</div>
  <div class="bg-blue-600 p-4 rounded text-white">6</div>
</div>

Edit in playground

Live Preview

Try the Align Content utility with different values

Open Interactive Playground

Variants

normal: default browser behavior; start: content packed at start of container; end: content packed at end of container; center: content centered in container; between: content evenly distributed with first at start and last at end; around: content evenly distributed with equal space around each; evenly: content evenly distributed with equal space between each; stretch: lines stretched to fill container

normalstartendcenterbetweenaroundevenlystretch