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

extends	title	category
_layouts.markdown	Justify Content - Flexbox	Flexbox

Justify Content

Utilities for controlling flex items are positioned along a container's main axis.

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

Class	Properties	Description
.justify-start	justify-content: flex-start;	Justify items against the start of the container.
.justify-center	justify-content: center;	Justify items in the center of the container.
.justify-end	justify-content: flex-end;	Justify items against the end of the container.
.justify-between	justify-content: space-between;	Justify items by adding an equal amount of space between each one.
.justify-around	justify-content: space-around;	Justify items by adding an equal amount of space around each one.

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