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

extends	title
_layouts.markdown	Flexbox

Flexbox

Justify 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.

Flex start

Use .justify-start to justify items against the start of the flex container's main axis (this is also the default behavior):

@component('_partials.code-sample')

1

2

3

@endcomponent

Flex 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

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

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