--- extends: _layouts.markdown title: "Align Content - Flexbox" category: "Flexbox" --- # Align Content
Utilities for controlling how lines are positioned in multi-line flex containers.
Usage Responsive
### 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 ## Responsive To control the alignment of flex content at a specific breakpoint, add a `{breakpoint}:` 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