Tailwind CSS tutorial #14: Flex Wrap

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!! 💛