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",
);