Align Content

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

@include('_partials.class-table', [ 'rows' => [ [ '.content-start', 'align-content: flex-start;', "Pack lines against the start of the cross axis.", ], [ '.content-center', 'align-content: center;', "Pack lines in the center of the cross axis.", ], [ '.content-end', 'align-content: flex-end;', "Pack lines against the end of the cross axis.", ], [ '.content-between', 'align-content: space-between;', "Distribute lines along the cross axis by adding an equal amount of space between each line.", ], [ '.content-around', 'align-content: space-around;', "Distribute lines along the cross axis by adding an equal amount of space around each line.", ], ] ])

Start

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

@component('_partials.code-sample')

1
2
3
4
5
@endcomponent

Center

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

@component('_partials.code-sample')

1
2
3
4
5
@endcomponent

End

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

@component('_partials.code-sample')

1
2
3
4
5
@endcomponent

Space between

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

@component('_partials.code-sample')

1
2
3
4
5
@endcomponent

Space around

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

@component('_partials.code-sample')

1
2
3
4
5
@endcomponent

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.

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

@component('_partials.responsive-code-sample') @slot('none')

1
2
3
4
5
@endslot @slot('sm')
1
2
3
4
5
@endslot @slot('md')
1
2
3
4
5
@endslot @slot('lg')
1
2
3
4
5
@endslot @slot('xl')
1
2
3
4
5
@endslot @slot('code')
@endslot @endcomponent

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'align-content', 'property' => 'alignContent', ], 'variants' => [ 'responsive', ], ])

Tailwind UI is now in early access!

Learn more