tailwindcss/docs/source/docs/flexbox-align-content.blade.md

extends	title
_layouts.documentation	Align Content - Flexbox

Align Content

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

@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => false, 'hover' => false, 'focus' => false ])

Class	Properties	Description
.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 Default

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