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.

How to install & setup Tailwind CSS v3

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>

tailwind flex v2

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>

tailwind flex v3

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>

tailwind flex v4

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>

tailwind flex v5

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>

tailwind flex v6

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>

Read Also

Tailwind CSS 3 FAQ Accordion UI Example

Tailwind CSS 3 Alert Message Example

Tailwind CSS 3 Avatars Example

Tailwind CSS 3 Badges Example

Tailwind CSS 3 Breadcrumb Example

Tailwind CSS Gradient Button Example

Tailwind CSS 3D Button Example

Tailwind CSS Loading Button Example

Tailwind CSS v3 Cards Examples

Tailwind CSS Checkbox Form Examples

Tailwind CSS Dropdowns (Menu) on Hover Example

Tailwind CSS Multiselect Dropdown Example

How to use dark mode toggle switch in Tailwind CSS 3

How to use @apply directive in Tailwind CSS

Tailwind CSS sticky header & fixed navbar example

Tailwind CSS Navbar UI Example

Tailwind CSS 3 Login Page UI Example

Tailwind CSS Login Modal Example

Tailwind CSS Search Examples

Tailwind CSS 3 Overlay Image Example

Tailwind CSS Thank You Page Example

Tailwind CSS Timeline UI Example

Tailwind CSS Responsive Footer Section Example

Tailwind CSS Background Image Header Example