Flex Wrap
Controls how flex items are wrapped.
Class | Property |
---|---|
fw-nw | flex-wrap: nowrap; |
fw-w | flex-wrap: wrap; |
fw-wr | flex-wrap: wrap-reverse; |
No Wrap
The flex items will stay in a single line, even if they overflow the container.
A
B
C
Wrap
The flex items will wrap onto multiple lines if there is not enough space in the container.
A
B
C
Wrap Reverse
The flex items will wrap onto multiple lines, but in reverse order.
A
B
C
Using responsive modifiers
Using responsive breakpoints like sm:fw-*
,
md:fw-*
, lg:fw-*
, and xxl:fw-*
allows targeting specific utilities in
different viewports.
Using hover modifiers
Using :hover
modifiers such as h:fw-*
allows
you to override elements and change their values when hovering over them.