Align content

Utilities for controlling how lines are positioned in multi-line flex containers.

In this article

Class Properties
.align-content-start align-content: flex-start;
.align-content-center align-content: center;
.align-content-end align-content: flex-end;
.align-content-between align-content: space-between;
.align-content-around align-content: space-around;

Usage

Start

Use .align-content-start to pack lines in a flex container against the start of the cross axis.

<div class="row row-sm align-content-start flex-wrap bg-gray-200 p-4" style="min-height: 300px;">
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>

Center

Use .align-content-center to pack lines in a flex container in the center of the cross axis.

<div class="row row-sm align-content-center flex-wrap bg-gray-200 p-4" style="min-height: 300px;">
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>

End

Use .align-content-end to pack lines in a flex container against the end of the cross axis.

<div class="row row-sm align-content-end flex-wrap bg-gray-200 p-4" style="min-height: 300px;">
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>

Space between

Use .align-content-between to distribute lines in a flex container such that there is an equal amount of space between each line.

<div class="row row-sm align-content-between flex-wrap bg-gray-200 p-4" style="min-height: 300px;">
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>

Space around

Use .align-content-around to distribute lines in a flex container such that there is an equal amount of space around each line.

<div class="row row-sm align-content-around flex-wrap bg-gray-200 p-4" style="min-height: 300px;">
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">4</div>
  </div>
  <div class="col-6 md:col-4 p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">5</div>
  </div>
</div>

Variants

By default, only responsive variants are generated for align content utilities.

Responsive

To control the flex alignment of content of an element at a specific breakpoint, add a {screen}: prefix to any existing align content utility.

For example, use .md:align-content-center to apply the align-content-center utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:align-content-center, add "align-content" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "align-content",
);

Questions or feedback about this article? Let us know