Tailwind CSS tutorial #14: Flex Wrap
Published: 2022-11-16 10:39:59

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](#wrap) | `flex-wrap	` | `flex-wrap: wrap;	`|
|[Wrap-reverse](#wrap-reverse) | `flex-wrap-reverse	` | `flex-wrap: wrap-reverse;`|
|[Nowrap](#nowrap) | `flex-nowrap	` | `flex-wrap: nowrap;`|

let's see each of this in action,
## **Wrap** 
Use flex-wrap to allow flex items to wrap:
```html
<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:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p056wiz89o53j5kdwm9t.png)

## **Wrap reversed** 
Use flex-wrap-reverse to wrap flex items in the reverse direction:
```html
<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:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxlsxq6ge1wogti0sti9.png)

## **Nowrap**
Use flex-nowrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:
```html
<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**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gti02f7w6t2a9k63gptk.png)

**Full code:**
The overall code will be attached to [repo ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/Flex-wrap)link.

**Overall Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eega4l2ic9clf5o03g1k.png)

**Resources:**
[tailwind.css](https://tailwindcss.com/docs)

Thank you for reading :), To learn more, check out my blogs on [Justify-Content](https://dev.to/shubhicodes/tailwind-css-tutorial-4-alignment-justify-content-3m20), [Responsive Navbar](https://dev.to/shubhicodes/tailwind-css-tutorial-3-responsive-navbar-47ip) and [Justify-Item](https://dev.to/shubhicodes/tailwind-css-tutorial-5-alignment-justify-items-4mci).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛