tailwindcss/docs/source/styles/flexbox/wrapping.blade.md

extends	title
_layouts.markdown	Flexbox

Flex Wrapping

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.

No wrapping

Use .flex-nowrap to prevent flex items from wrapping (this is also the default behavior):

@component('_partials.code-sample')

1

2

3

@endcomponent

Wrap normally

Use .flex-wrap to allow flex items to wrap:

@component('_partials.code-sample')

1

2

3

@endcomponent

Wrap reversed

Use .flex-wrap-reverse to wrap flex items in the reverse direction:

@component('_partials.code-sample')

1

2

3

@endcomponent