Flex wrap
Utilities for controlling wrapping in flex containers.
Quick reference
Section titled “Quick reference”| Class | Styles |
|---|---|
af-wrap | flex-wrap: wrap |
af-nowrap | flex-wrap: nowrap |
Examples
Section titled “Examples”Wrap
One
Two
Three
Four
<div class="af-flex af-wrap" style="gap: 0.5rem; max-width: 14rem;">
<div class="af-badge">
One
</div>
<div class="af-badge">
Two
</div>
<div class="af-badge">
Three
</div>
<div class="af-badge">
Four
</div>
</div>Responsive variants
Section titled “Responsive variants”All wrap utilities support responsive variants using the @{bp} suffix:
af-wrap@lg
See Responsive Suffix for syntax and breakpoints.