--- extends: _layouts.markdown title: "Wrapping - Flexbox" category: "Flexbox" --- # Flex Wrapping
Utilities for controlling how flex items wrap.
Responsive
### Don't wrap Default Use `.flex-no-wrap` to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary: @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 ## Responsive To control how flex items wrap at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:flex-wrap-reverse` to apply the `flex-wrap-reverse` 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