--- extends: _layouts.markdown title: "Justify Content - Flexbox" category: "Flexbox" --- # Justify Content
Utilities for controlling flex items are positioned along a container's main axis.
Responsive
### Start Default Use `.justify-start` to justify items against the start of the flex container's main axis: @component('_partials.code-sample')
1
2
3
@endcomponent ### Center Use `.justify-center` to justify items along the center of the flex container's main axis: @component('_partials.code-sample')
1
2
3
@endcomponent ### End Use `.justify-end` to justify items against the end of the flex container's main axis: @component('_partials.code-sample')
1
2
3
@endcomponent ### Space between Use `.justify-between` to justify items along the flex container's main axis such that there is an equal amount of space between each item: @component('_partials.code-sample')
1
2
3
@endcomponent ### Space around Use `.justify-around` to justify items along the flex container's main axis such that there is an equal amount of space around each item: @component('_partials.code-sample')
1
2
3
@endcomponent ## Responsive To justify flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:justify-between` to apply the `justify-between` 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
@endslot @slot('sm')
1
2
3
@endslot @slot('md')
1
2
3
@endslot @slot('lg')
1
2
3
@endslot @slot('xl')
1
2
3
@endslot @slot('code')
@endslot @endcomponent