| Class | Properties |
|---|---|
.flex-wrap | flex-wrap: wrap; |
.flex-no-wrap | flex-wrap: no-wrap; |
.flex-wrap-reverse | flex-wrap: wrap-reverse; |
Usage
No wrapping
Use .flex-no-wrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
<div class="row flex-no-wrap bg-gray-200">
<div class="col-5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="col-5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="col-5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
</div>Wrap
Use .flex-wrap to allow flex items to wrap.
<div class="row flex-wrap bg-gray-200">
<div class="col-5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="col-5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="col-5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
</div>Wrap reverse
Use .flex-wrap-reverse to wrap flex items in the reverse direction.
<div class="row flex-wrap-reverse bg-gray-200">
<div class="col-5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
</div>
<div class="col-5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
</div>
<div class="col-5 flex-none p-2">
<div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
</div>
</div>Variants
By default, only responsive variants are generated for flex wrap utilities.
Responsive
To control the justification of flex content at a specific breakpoint, add a {screen}: prefix to any existing flex wrap utility.
For example, use .md:flex-wrap to apply the flex-wrap utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:flex-wrap, add "flex-wrap" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"flex-wrap",
);