graphql
react

Tailwind CSS Flex Direction

The tailwind flex direction utility class allows you to control the direction in which flex items are laid out within a flex container. It provides a set of classes that enable you to easily specify the flex direction, allowing you to create flexible and responsive layouts.

Setting Tailwind Flex Direction

To set the tailwind flex direction of a flex container, you can use the flex class in combination with one of the following classes:

  • flex-row: This sets the flex direction to horizontal, with flex items laid out in a row from left to right.

  • flex-row-reverse: This sets the flex direction to horizontal, but in reverse order, with flex items laid out in a row from right to left.

  • flex-col: This sets the flex direction to vertical, with flex items laid out in a column from top to bottom.

  • flex-col-reverse: This sets the flex direction to vertical, but in reverse order, with flex items laid out in a column from bottom to top.

Tailwind Flex Row

Tailwind flex row class is used to set the flex direction to horizontal, with flex items laid out in a row from left to right.

html
<div class="flex flex-row">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

A
B
C

Tailwind Flex-Row-Reverse

Tailwind flex row reverse class is used to set the flex direction to horizontal, but in reverse order, with flex items laid out in a row from right to left.

html
<div class="flex flex-row-reverse">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

flex-row
flex-row
flex-row

Tailwind Flex-Col

Tailwind flex col class is used to set the flex direction to vertical, with flex items laid out in a column from top to bottom

html
<div class="flex flex-col">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

A
B
C

Tailwind Flex-Col-Reverse

Tailwind flex col reverse class is used to set the flex direction to vertical, but in reverse order, with flex items laid out in a column from bottom to top

html
<div class="flex flex-col-reverse">
  <div class="flex-1">A</div>
  <div class="flex-1">B</div>
  <div class="flex-1">C</div>
</div>

Preview

A
B
C

That's it! You now have a good understanding of how to use the flex direction utility classes in Tailwind CSS to control the direction in which flex items are laid out within a flex container.

Tailwind Flex Direction Class Table

ClassProperties
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-colflex-direction: column;
flex-col-reverseflex-direction: column-reverse;

Windframe Tailwind blocks

footer

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

ad-banner