Flex Wrapping
Class reference
Don't wrap Default
Use .flex-no-wrap
to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
<div class="flex flex-no-wrap bg-grey-lighter">
<div class="w-2/5 flex-none p-2">
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
Wrap normally
Use .flex-wrap
to allow flex items to wrap:
<div class="flex flex-wrap bg-grey-lighter">
<div class="w-2/5 p-2">
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 p-2">
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 p-2">
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
Wrap reversed
Use .flex-wrap-reverse
to wrap flex items in the reverse direction:
<div class="flex flex-wrap-reverse bg-grey-lighter">
<div class="w-2/5 p-2">
<div class="text-grey-darker text-center bg-grey-light p-2">1</div>
</div>
<div class="w-2/5 p-2">
<div class="text-grey-darker text-center bg-grey-light p-2">2</div>
</div>
<div class="w-2/5 p-2">
<div class="text-grey-darker text-center bg-grey-light p-2">3</div>
</div>
</div>
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 documentation.
Customizing
Responsive and State Variants
By default, only responsive variants are generated for flex-wrap utilities.
You can control which variants are generated for the flex-wrap utilities by modifying the flexbox
property in the modules
section of your Tailwind config file.
For example, this config will also generate hover and focus variants:
Note that modifying the flexbox
property will affect which variants are generated for all Flexbox utilities, not just the flex-wrap utilities.
Disabling
If you don't plan to use the flex-wrap utilities in your project, you can disable them entirely by setting the flexbox
property to false
in the modules
section of your config file:
Note that modifying the flexbox
property will affect which variants are generated for all Flexbox utilities, not just the flex-wrap utilities.