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 | flex-row |
flex-direction: row; |
| Row reversed | flex-row-reverse |
flex-direction: row-reverse; |
| Column | flex-col |
flex-direction: column; |
| Column reversed | 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.
<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:
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.
<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:
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.
<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
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.
<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:
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!! 💛
Top comments (0)