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

extends	title
_layouts.markdown	Flexbox

Flexbox

Align Content

Usage Responsive Customizing

Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.

Start Default

Use .content-start to pack lines in a flex container against the start of the main 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 main 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 main 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