Tailwind CSS tutorial #13: Flex Direction
Tags: webdev, tutorial, programming, tailwindcss
Published: 2022-11-15 08:13:11

In the article, we will go into detail on how to use `flex-direction`.

## Flex Direction
The flex-direction property is sub-property of flexible box layout module. It established the main axis of the flexible item. the main axis of the flex item is the primary axis. It’s not necessarily horizontal all the time it basically depends on the flex-direction property. 
**Format**
> `flex-{direction}`

| Alignment | Tailwind Class | CSS Property |
| ------ | ------ | ------ |
|[Row](#row) | `flex-row	` | `	flex-direction: row;`|
|[Row reversed](#rowreversed) | `flex-row-reverse	` | `flex-direction: row-reverse;`|
|[Column](#column) | `flex-col	` | `	flex-direction: column;`|
|[Column reversed](#columnreversed) |  `flex-col-reverse	`| `flex-direction: column-reverse;`|

let's see each of this in action,
## **Row** 
It arranges the row the same as the text direction. The default value of flex-direction is a row. It is used to specify that the item has a normal text direction. It makes the item follow the normal text direction in lines.
```html
<li class="flex items-center justify-between px-4 py-2">
  <div class="flex w-full flex-row">
    <span class="mr-1 mb-1 inline h-16 w-16 rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="mr-1 mb-1 inline h-16 w-16 rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="mr-1 mb-1 inline h-16 w-16 rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
    <span class="mr-1 mb-1 inline h-16 w-16 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-row</span>
  </div>
</li>
```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lm7dmn6utysgf2punnqc.png)

## **Row reversed** 
This class is used to follow the opposite text direction. It makes flex items in reverse order exactly the opposite of text direction as we can see in the Output.
```html
<li class="flex items-center justify-between px-4 py-2">
  <div class="flex w-full flex-row-reverse">
    <span class="mr-1 mb-1 inline h-16 w-16 rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="mr-1 mb-1 inline h-16 w-16 rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="mr-1 mb-1 inline h-16 w-16 rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
    <span class="mr-1 mb-1 inline h-16 w-16 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-row-reverse</span>
  </div>
</li>
```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tjwgimqmv1eya60enc9.png)

## **Column**
It arranges the row as a column same as text direction but top to bottom. It is used to specify that the item has a normal top to bottom direction. It makes the item follow the normal top to bottom direction as we can see in the output.
```html
<li class="flex items-center justify-between px-4 py-2">
  <div class="flex w-full flex-col">
    <span class="mr-1 mb-1 inline h-16 w-16 rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="mr-1 mb-1 inline h-16 w-16 rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="mr-1 mb-1 inline h-16 w-16 rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
    <span class="mr-1 mb-1 inline h-16 w-16 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-col</span>
  </div>
</li>
```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqi10k16bng64h1ubsup.png)


## **Column reversed** 
It arranges the row as a column same as row-reverse bottom to top. It is used to specify that the item has a normal bottom to top direction. It makes the item follow the normal bottom to top direction as we can see in the output.
```html
<li class="flex items-center justify-between px-4 py-2">
    <div class="flex flex-col-reverse w-full">
      <span class="inline w-16 h-16 bg-red-500 text-white px-3 py-2 rounded-md mr-1 mb-1">1</span>
      <span class="inline w-16 h-16 bg-green-500 text-white px-3 py-2 rounded-md mr-1 mb-1">2</span>
      <span class="inline w-16 h-16 bg-blue-500 text-white px-3 py-2 rounded-md mr-1 mb-1">3</span>
      <span class="inline w-16 h-16 bg-yellow-300 text-white px-3 py-2 rounded-md mr-1 mb-1">4</span>
    </div>
    <div class="ml-5 text-right">
      <span class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2 mb-1">flex-col-reverse</span>
    </div>
  </li>
```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/meg2r6rvu0e9qj499gti.png)



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

**Overall Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a98e74yd5frx3j6jy4i.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!! 💛