Tailwind Flexbox lesson
Let flex items wrap
Flex items normally stay on one line, even when they become too narrow. Use flex-wrap to allow a new row when the container runs out of room.
Utilities
| Class | What it does |
|---|---|
flex-nowrap | Keeps all items on one line. This is the default. |
flex-wrap | Moves overflowed items onto a new line. |
flex-wrap-reverse | Wraps items in the reverse cross-axis direction. |
Try it
Tags, filter controls, and compact card lists often need to wrap gracefully on small screens.
<ul class="flex flex-wrap gap-2">
<li class="rounded bg-green-100 px-3 py-1">Tailwind</li>
<li class="rounded bg-green-100 px-3 py-1">Flexbox</li>
<li class="rounded bg-green-100 px-3 py-1">CSS</li>
</ul>