Align Content

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

Default class reference

Start

Use content-start to pack rows in a container against the start of the cross axis:

1. <div class="h-48 flex flex-wrap content-start ...">
2. <div>1</div>
3. <div>2</div>
4. <div>3</div>
5. <div>4</div>
6. <div>5</div>
7. </div>

Center

Use content-center to pack rows in a container in the center of the cross axis:

1. <div class="h-48 flex flex-wrap content-center ...">
2. <div>1</div>
3. <div>2</div>
4. <div>3</div>
5. <div>4</div>
6. <div>5</div>
7. </div>

End

Use content-end to pack rows in a container against the end of the cross axis:

1. <div class="h-48 flex flex-wrap content-end ...">
2. <div>1</div>
3. <div>2</div>
4. <div>3</div>
5. <div>4</div>
6. <div>5</div>
7. </div>

Space between

Use content-between to distribute rows in a container such that there is an equal amount of space between each line:

1. <div class="h-48 flex flex-wrap content-between ...">
2. <div>1</div>
3. <div>2</div>
4. <div>3</div>
5. <div>4</div>
6. <div>5</div>
7. </div>

Space around

Use content-around to distribute rows in a container such that there is an equal amount of space around each line:

1. <div class="h-48 flex flex-wrap content-around ...">
2. <div>1</div>
3. <div>2</div>
4. <div>3</div>
5. <div>4</div>
6. <div>5</div>
7. </div>

Space evenly

Use content-evenly to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around:

1. <div class="h-48 flex flex-wrap content-evenly ...">
2. <div>1</div>
3. <div>2</div>
4. <div>3</div>
5. <div>4</div>
6. <div>5</div>
7. </div>

Responsive

To control the alignment of flex content at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:content-around to apply the content-around utility at only medium screen sizes and above.

1. <div class="content-start md:content-around ...">
2. <!-- ... -->
3. </div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Variants

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

You can control which variants are generated for the align-content utilities by modifying the alignContent property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

1. // tailwind.config.js
2. module.exports = {
3. variants: {
4. extend: {
5. // ...
6. +       alignContent: ['hover', 'focus'],
7. }
8. }
9. }

Disabling

If you don’t plan to use the align-content utilities in your project, you can disable them entirely by setting the alignContent property to false in the corePlugins section of your config file:

1. // tailwind.config.js
2. module.exports = {
3. corePlugins: {
4. // ...
5. +     alignContent: false,
6. }
7. }

←Justify Self   Align Items→