Tailwind CSS tutorial #14: Flex Wrap
Shubhi✨
Posted on November 16, 2022
In the article, we will go into detail on how to use flex-wrap.
Flex Wrap
The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked. It is used to designate a single line or multi-line format to flex items inside the flex container.
Format
flex-{nowrap|wrap|wrap-reverse}
| Alignment | Tailwind Class | CSS Property |
|---|---|---|
| Wrap | flex-wrap |
flex-wrap: wrap; |
| Wrap-reverse | flex-wrap-reverse |
flex-wrap: wrap-reverse; |
| Nowrap | flex-nowrap |
flex-wrap: nowrap; |
let's see each of this in action,
Wrap
Use flex-wrap to allow flex items to wrap:
<li class="flex items-center justify-between px-4 py-2">
<div class="flex w-full flex-wrap">
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-red-500 px-3 py-2 text-white">1</span>
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-green-500 px-3 py-2 text-white">2</span>
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-yellow-300 px-3 py-2 text-white">4</span>
</div>
<div class="ml-5 text-right">
<span class="rounded-2 mb-1 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">flex-wrap</span>
</div>
</li>
Output:
Wrap reversed
Use flex-wrap-reverse to wrap flex items in the reverse direction:
<li class="flex items-center justify-between px-4 py-2">
<div class="flex w-full flex-wrap-reverse">
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-red-500 px-3 py-2 text-white">1</span>
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-green-500 px-3 py-2 text-white">2</span>
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-yellow-300 px-3 py-2 text-white">4</span>
</div>
<div class="ml-5 text-right">
<span class="rounded-2 mb-1 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">flex-wrap-reverse</span>
</div>
</li>
Output:
Nowrap
Use flex-nowrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
<li class="flex items-center justify-between px-4 py-2">
<div class="flex w-full flex-nowrap">
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-red-500 px-3 py-2 text-white">1</span>
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-green-500 px-3 py-2 text-white">2</span>
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
<span class="mr-1 mb-1 inline h-16 w-32 rounded-md bg-yellow-300 px-3 py-2 text-white">4</span>
</div>
<div class="ml-5 text-right">
<span class="rounded-2 mb-1 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">flex-nowrap</span>
</div>
</li>
Output
Full code:
The overall code will be attached to repo link.
Overall Output
Resources:
tailwind.css
Thank you for reading :), To learn more, check out my blogs on Justify-Content, Responsive Navbar and Justify-Item.
If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.
Keep learning! Keep coding!! 💛
Posted on November 16, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024