--- extends: _layouts.markdown title: "Wrapping - Flexbox" category: "Flexbox" --- # Flex Wrapping
Utilities for controlling how flex items wrap.
@include('_partials.feature-badges', [ 'responsive' => true, 'customizable' => false, 'hover' => false, 'focus' => false ])
Class Properties Description
.flex-no-wrap flex-wrap: nowrap; Don't allow flex items to wrap.
.flex-wrap flex-wrap: wrap; Allow flex items to wrap in the normal direction.
.flex-wrap-reverse flex-wrap: wrap-reverse; Allow flex items to wrap in the reverse direction.
### 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