--- extends: _layouts.documentation title: "Flex Wrapping" description: "Utilities for controlling how flex items wrap." features: responsive: true customizable: false hover: false active: false focus: false --- @include('_partials.class-table', [ 'rows' => [ [ '.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 `{screen}:` 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](/docs/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' => 'flex-wrap', 'property' => 'flexbox', ], 'variants' => [ 'responsive', ], 'extraMessage' => 'Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the flex-wrap utilities.' ])