flex-wrap lets items flow to new lines; nowrap keeps one line. This family contains 3 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
flex-wrap | flex-wrap: wrap; |
flex-wrap-reverse | flex-wrap: wrap-reverse; |
flex-nowrap | flex-wrap: nowrap; |
Example#
example
<div class="flex flex-wrap gap-2">…tags…</div>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Tag clouds and chip rows want flex-wrap + gap
Related#
utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox