Flex Direction
Class reference
Row Default
Use .flex-row
to position flex items horizontally in the same direction as text:
<div class="flex flex-row bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
Row reversed
Use .flex-row-reverse
to position flex items horizontally in the opposite direction:
<div class="flex flex-row-reverse bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
Column
Use .flex-col
to position flex items vertically:
<div class="flex flex-col bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
Column reversed
Use .flex-col-reverse
to position flex items vertically in the opposite direction:
<div class="flex flex-col-reverse bg-grey-lighter">
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
<div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>
Responsive
To apply a flex direction utility only at a specific breakpoint, add a {screen}:
prefix to the existing class name. For example, adding the class md:flex-row
to an element would apply the flex-row
utility at medium screen sizes and above.
For more information about Tailwind's responsive design features, check out the Responsive Design documentation.
Customizing
Responsive and State Variants
By default, only responsive variants are generated for flex-direction utilities.
You can control which variants are generated for the flex-direction utilities by modifying the flexbox
property in the modules
section of your Tailwind config file.
For example, this config will also generate hover and focus variants:
Note that modifying the flexbox
property will affect which variants are generated for all Flexbox utilities, not just the flex-direction utilities.
Disabling
If you don't plan to use the flex-direction utilities in your project, you can disable them entirely by setting the flexbox
property to false
in the modules
section of your config file:
Note that modifying the flexbox
property will affect which variants are generated for all Flexbox utilities, not just the flex-direction utilities.