Tailwind CSS Simple Flexbox Examples

In this tutorial we will see tailwind css flex property example. For this section we will cover some useful tailwind css flex class like flex direction .flex-row, flex-row-reverse, flex-col, flex-col-reverse. Flex Wrap flex-nowrap, flex-wrap, flex-wrap-reverse and Flex Justify Classes Justify-start, Justify-end, Justify-center, Justify-between, justify-around, justify-evenly example with Tailwind CSS.


Example 1

Simple Flex Property

To create flex layout you need to set a parent element or div .flex class property. 

Flex class property

<div class="flex gap-2">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>


Example 2


Flex Direction

Flex row

The flex-direction property defines in which direction the container wants to stack the flex items.

flex-row class property

<div class="flex flex-row">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>


flex-row-reverse class property

<div class="flex flex-row-reverse">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>


Flex column

flex-col class property

<div class="flex flex-col w-16 gap-2">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>


flex-col-reverse class property

<div class="flex flex-col-reverse w-40 gap-2">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>


Example 3

Flex Wrap

flex-nowrap class property

<div class="flex gap-2 flex-nowrap">
  <div class="w-1/5 p-4 text-white bg-red-500">1</div>
  <div class="w-1/5 p-4 text-white bg-red-500">2</div>
  <div class="w-1/5 p-4 text-white bg-red-500">3</div>
  <div class="w-1/5 p-4 text-white bg-red-500">4</div>
  <div class="w-1/5 p-4 text-white bg-red-500">5</div>
  <div class="w-1/5 p-4 text-white bg-red-500">6</div>
</div>


flex-wrap class property

<div class="flex flex-wrap gap-2">
  <div class="w-1/5 p-4 text-white bg-red-500">1</div>
  <div class="w-1/5 p-4 text-white bg-red-500">2</div>
  <div class="w-1/5 p-4 text-white bg-red-500">3</div>
  <div class="w-1/5 p-4 text-white bg-red-500">4</div>
  <div class="w-1/5 p-4 text-white bg-red-500">5</div>
  <div class="w-1/5 p-4 text-white bg-red-500">6</div>
</div>

flex-wrap-reverse class property

<div class="flex flex-wrap-reverse gap-2">
  <div class="w-1/5 p-4 text-white bg-red-500">1</div>
  <div class="w-1/5 p-4 text-white bg-red-500">2</div>
  <div class="w-1/5 p-4 text-white bg-red-500">3</div>
  <div class="w-1/5 p-4 text-white bg-red-500">4</div>
  <div class="w-1/5 p-4 text-white bg-red-500">5</div>
  <div class="w-1/5 p-4 text-white bg-red-500">6</div>
</div>


Example 4

Tailwind CSS Flex Justify Content

Justify-start

<div class="flex justify-start gap-2 p-4 bg-gray-400">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>


justify-end

<div class="flex justify-end gap-2 p-4 bg-gray-400">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>


justify-center

<div class="flex justify-center gap-2 p-4 bg-gray-400">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>


justify-between

<div class="flex justify-between gap-2 p-4 bg-gray-400">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>

justify-around

<div class="flex justify-around gap-2 p-4 bg-gray-400">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>


justify-evenly

<div class="flex gap-2 p-4 bg-gray-400 justify-evenly">
  <div class="p-4 text-white bg-red-500">1</div>
  <div class="p-4 text-white bg-red-500">2</div>
  <div class="p-4 text-white bg-red-500">3</div>
  <div class="p-4 text-white bg-red-500">4</div>
  <div class="p-4 text-white bg-red-500">5</div>
  <div class="p-4 text-white bg-red-500">6</div>
</div>


Example 5

Responsive Flex

Responsive Flex Direction

<div class="flex flex-col gap-4 md:flex-row lg:flex-row-reverse">
  <div class="p-4 text-white bg-gray-400">Flex item 1</div>
  <div class="p-4 text-white bg-gray-500">Flex item 2</div>
  <div class="p-4 text-white bg-gray-400">Flex item 3</div>
</div>

Responsive Flex Justify Content

<div class="flex justify-start md:justify-between lg:justify-evenly">
  <div class="p-4 text-white bg-gray-400">Flex item 1</div>
  <div class="p-4 text-white bg-gray-500">Flex item 2</div>
  <div class="p-4 text-white bg-gray-400">Flex item 3</div>
</div>