Justify Content

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

@include('_partials.class-table', [ 'rows' => [ [ '.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

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 {screen}: 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

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'justify-content', 'property' => 'justifyContent', ], 'variants' => [ 'responsive', ], ])

Tailwind UI is now in early access!

Learn more