Layout

Tailwind CSS FlexBox

In Tailwind CSS, the Flexbox utility classes allow for easy implementation of flexible layouts using the Flexbox CSS layout.Tailwind CSS provides a set of utility classes that support the Flexbox layout.

image

Tailwind CSS provides responsive layout using utility classes that allows you to apply different Flexbox behaviors based on screen size breakpoints without any additional configuration,Simply add the appropriate responsive prefix (sm:, md:, lg:, xl:) to Flexbox classes to create responsive layouts.

Flex Container

To create a flex container, apply the flex class to an element. This class sets the display property of the element to flex, enabling the Flexbox layout.

Initial

Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:

01
02
03
04 
<div class="w-full h-16 gap-3 flex max-w-lg mx-auto overflow-hidden ">
        <div
        class="h-full w-16 bg-indigo-700 rounded-lg shadow-lg text-white flex flex-none items-center justify-center">
        01</div>
        <div
        class="h-full w-32 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-initial items-center justify-center">
        02</div>
        <div
        class="h-full w-32 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-initial items-center justify-center">
        03</div>
        <div
        class="h-full w-32 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-initial items-center justify-center">
        04</div>
        </div>

Flex 1

Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:

01
02
03
04 
<div class="w-full h-16 gap-3 flex max-w-lg mx-auto overflow-hidden ">
        <div
        class="h-full w-16 bg-indigo-700 rounded-lg shadow-lg text-white flex flex-none items-center justify-center">
        01
        </div>
        <div
        class="h-full w-20 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-1 items-center justify-center">
        02
        </div>
        <div
        class="h-full w-24 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-1 items-center justify-center">
        03
        </div>
        <div
        class="h-full w-32 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-1 items-center justify-center">
        04
        </div>
        </div>

Auto

Use flex-auto to allow a flex item to grow and shrink, taking into account its initial size:

01
02
03
04 
<div class="w-full h-16 gap-3 flex max-w-xl mx-auto overflow-hidden ">
        <div
        class="h-full w-16 bg-indigo-700 rounded-lg shadow-lg text-white flex flex-none items-center justify-center">
        01
        </div>
        <div
        class="h-full w-20 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-auto items-center justify-center">
        02
        </div>
        <div
        class="h-full w-24 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-auto items-center justify-center">
        03
        </div>
        <div
        class="h-full w-32 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-auto items-center justify-center">
        04
        </div>
        </div>

None

Use flex-none to prevent a flex item from growing or shrinking:

01
02
03
04 
<div class="w-full h-16 gap-3 flex justify-center max-w-xl mx-auto overflow-hidden ">
        <div
        class="h-full w-16 bg-indigo-700 rounded-lg shadow-lg text-white flex flex-none items-center justify-center">
        01
        </div>
        <div
        class="h-full w-16 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-none items-center justify-center">
        02
        </div>
        <div
        class="h-full w-16 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-1 items-center justify-center">
        03
        </div>
        <div
        class="h-full w-16 bg-indigo-600 rounded-lg shadow-lg text-white flex flex-none items-center justify-center">
        04
        </div>
        </div>

Flex Items

Add the flex-1, flex-auto, flex-initial, or flex-none classes to flex items to control their flexibility, sizing, and behavior within the flex container. These classes adjust the flex-grow, flex-shrink, and flex-basis properties of flex items.

Flex Grow

In Tailwind CSS, the flex-grow utility class is used to control the ability of a flex item to grow and occupy available space within a flex container.

.flex-grow 
<div class="w-full flex max-w-xl mx-auto gap-2 mb-5">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-24"></div>
        <div class="flex w-24 rounded-lg flex-grow bg-indigo-600 h-24 text-white text-center items-center justify-center text-sm font-medium">.flex-grow</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-24"></div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-24"></div>
        </div>

Flex Grow On Hover

Use this Example of Flex Grow where one flex item grow on hover. 

<div class="w-full flex justify-center max-w-xl mx-auto gap-2 ">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 transition-all duration-700 hover:flex-grow"></div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 transition-all duration-700 hover:flex-grow"></div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 transition-all duration-700 hover:flex-grow"></div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 transition-all duration-700 hover:flex-grow"></div>
        </div>

Flex shrink

In Tailwind CSS, the flex-shrink utility class controls the ability of a flex item to shrink when there's not enough space available in a flex container. 

<div class="w-full flex max-w-max mx-auto gap-2">
        <div class="flex w-24 shrink-0 rounded-lg bg-indigo-600 h-16 "></div>
        <div class="flex w-24 shrink-0 rounded-lg bg-indigo-600 h-16 "></div>
        <div class="flex w-24 shrink rounded-lg bg-indigo-700 h-16 "></div>
        <div class="flex w-24 shrink-0 rounded-lg bg-indigo-600 h-16 "></div>
        </div>

Flex Gap

To apply a gap between flex items in a flex container, use the gap-{size} utilities where {size} can be one of the predefined sizes available in Tailwind CSS.It adds margins between the flex items in both the main and cross axes of the flex container. 

<div class="w-full h-auto flex gap-x-2 flex-wrap gap-y-5 max-w-lg mx-auto rounded-xl overflow-hidden">
        <div class="h-16 w-1/4 rounded-xl bg-indigo-600"></div>
        <div class="h-16 w-1/4 rounded-xl bg-indigo-600"></div>
        <div class="h-16 w-1/4 rounded-xl bg-indigo-600"></div>
        <div class="h-16 w-1/4 rounded-xl bg-indigo-600"></div>
        <div class="h-16 w-1/4 rounded-xl bg-indigo-600"></div>
        <div class="h-16 w-1/4 rounded-xl bg-indigo-600"></div>
        <div class="h-16 w-1/4 rounded-xl bg-indigo-600"></div>
        <div class="h-16 w-1/4 rounded-xl bg-indigo-600"></div>
        </div>

Flex Direction

Use the flex-row, flex-col, flex-row-reverse, or flex-col-reverse classes to specify the direction of the flex container.

Row

Use flex-row to position flex items horizontally in the same direction as text:

1
2
3
4 
<div class="w-full h-auto flex items-center justify-center gap-2 max-w-lg mx-auto rounded-xl overflow-hidden">
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">1</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">2</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">3</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">4</div>
        </div>

Row Reversed

Use flex-row-reverse to position flex items horizontally in the opposite direction:

1
2
3
4 
<div class="w-full h-auto flex flex-row-reverse items-center justify-center gap-2 max-w-lg mx-auto rounded-xl overflow-hidden">
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">1</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">2</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">3</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">4</div>
        </div>

Column

Use flex-col to position flex items vertically:

1
2
3
4 
<div class="w-full h-auto flex flex-col items-center justify-center gap-2 max-w-lg mx-auto rounded-xl overflow-hidden">
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">1</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">2</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">3</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">4</div>
        </div>

Column Reversed

Use flex-col-reverse to position flex items vertically in the opposite direction:

1
2
3
4 
<div class="w-full h-auto flex flex-col-reverse items-center justify-center gap-2 max-w-lg mx-auto rounded-xl overflow-hidden">
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">1</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">2</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">3</div>
        <div class="h-16 aspect-square flex items-center justify-center w-16 rounded-xl bg-indigo-600 font-medium text-base text-white">4</div>
        </div>

Flex Alignment

Use alignment utility classes like justify-start, justify-end, justify-center, justify-between, justify-around, items-start, items-end, items-center, items-baseline, and items-stretch to control the alignment of flex items along the main and cross axes of the flex container.

Justify start

Use justify-start to justify items against the start of the container’s main axis:

1
2
3
4 
<div class="w-full h-80 flex justify-start max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

Justify center

Use justify-center to justify items along the center of the container’s main axis:

1
2
3
4 
<div class="w-full h-80 flex justify-center max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

Justify End

Use justify-end to justify items against the end of the container’s main axis:

1
2
3
4 
<div class="w-full h-80 flex justify-end max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

Justify Space between

Use justify-between to justify items along the container’s main axis such that there is an equal amount of space between each item:

1
2
3
4 
<div class="w-full h-80 flex justify-between max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

justify Space around

Use justify-around to justify items along the container’s main axis such that there is an equal amount of space on each side of each item:

1
2
3
4 
<div class="w-full h-80 flex justify-around  max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200 ">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

justify Space Evenly

Use justify-evenly to justify items along the container’s main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using justify-around:

1
2
3
4 
<div class="w-full h-80 flex justify-evenly max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200 ">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

Align Start

Use items-start to align items to the start of the container’s cross axis:

1
2
3
4 
<div class="w-full h-80 flex items-start max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200 ">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

Align Center

Use items-center to align items along the center of the container’s cross axis:

1
2
3
4 
<div class="w-full h-80 flex items-center max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200 ">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

Align End

Use items-end to align items to the end of the container’s cross axis:

1
2
3
4 
<div class="w-full h-80 flex items-end max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200 ">
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-24 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

Align Baseline

Use items-baseline to align items along the container’s cross axis such that all of their baselines align:

1
2
3
4 
<div class="w-full h-80 flex items-baseline max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200 ">
        <div class="flex w-full rounded-lg bg-indigo-600 pt-2 pb-5 items-center justify-center text-white">1</div>
        <div class="flex w-full rounded-lg bg-indigo-600 py-9 items-center justify-center text-white">2</div>
        <div class="flex w-full rounded-lg bg-indigo-600 pt-4 pb-3 items-center justify-center text-white">3</div>
        <div class="flex w-full rounded-lg bg-indigo-600 pt-9 pb-1 items-center justify-center text-white">4</div>
        </div>

Align stretch

Use items-stretch to stretch items to fill the container’s cross axis:

1
2
3
4 
<div class="w-full h-80 flex items-stretch max-w-xl overflow-auto mx-auto gap-2 p-6 rounded-lg shadow-lg border border-gray-200 ">
        <div class="flex w-full rounded-lg bg-indigo-600 items-center justify-center text-white">1</div>
        <div class="flex w-full rounded-lg bg-indigo-600 items-center justify-center text-white">2</div>
        <div class="flex w-full rounded-lg bg-indigo-600 items-center justify-center text-white">3</div>
        <div class="flex w-full rounded-lg bg-indigo-600 items-center justify-center text-white">4</div>
        </div>

Flex Wrap

In Tailwind CSS, the flex-wrap utility class controls whether flex items should wrap or not when there's not enough space available in a flex container.

Don’t wrap

Use flex-nowrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:

1
2
3
4 
<div class="w-full flex max-w-xl overflow-auto mx-auto gap-2 mb-5">
        <div class="flex min-w-[200px] rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex min-w-[200px] rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex min-w-[200px] rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex min-w-[200px] rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

Wrap normally

Use flex-wrap to allow flex items to wrap:

1
2
3
4 
<div class="w-full flex justify-start flex-wrap max-w-xl mx-auto gap-2 mb-5">
        <div class="flex w-44 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-44 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-44 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-44 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

Wrap reversed

Use flex-wrap-reverse to wrap flex items in the reverse direction:

1
2
3
4 
<div class="w-full flex justify-start flex-wrap-reverse max-w-xl mx-auto gap-2 mb-5">
        <div class="flex w-44 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">1</div>
        <div class="flex w-44 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">2</div>
        <div class="flex w-44 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">3</div>
        <div class="flex w-44 rounded-lg bg-indigo-600 h-16 items-center justify-center text-white">4</div>
        </div>

Flex Basis

In Tailwind CSS, the flex-basis utility class sets the initial size of a flex item along the main axis before any remaining space is distributed.

01
02
03 
<div class="w-full h-16 flex max-w-lg gap-3 mx-auto rounded-xl overflow-hidden">
        <div class="basis-1/4 flex items-center justify-center rounded-lg shadow-lg bg-indigo-600 text-white ">01</div>
        <div class="basis-1/4 flex items-center justify-center rounded-lg shadow-lg bg-indigo-600 text-white ">02</div>
        <div class="basis-1/2 flex items-center justify-center rounded-lg shadow-lg bg-indigo-600 text-white ">03</div>
        </div>

Flex Basis On Hover

Use this Example of Flex Grow where one flex item grow on hover.

basis-1/3
basis-1/3
basis-1/3 
<div class="w-full h-16 flex max-w-lg gap-3 mx-auto rounded-xl overflow-hidden">
        <div class="basis-1/3 shrink flex items-center group justify-center rounded-lg shadow-lg bg-indigo-600 text-white transition-all duration-700 hover:basis-2/3">
        <span class="hidden transition-all duration-700 group-hover:block">basis-2/4</span>
        <span class="block transition-all duration-700 group-hover:hidden">basis-1/3</span>
        </div>
        <div class="basis-1/3 shrink flex items-center group justify-center rounded-lg shadow-lg bg-indigo-600 text-white transition-all duration-700 hover:basis-2/3">
        <span class="hidden transition-all duration-700 group-hover:block">basis-2/4</span>
        <span class="block transition-all duration-700 group-hover:hidden">basis-1/3</span>
        </div>
        <div class="basis-1/3 shrink flex items-center group justify-center rounded-lg shadow-lg bg-indigo-600 text-white transition-all duration-700 hover:basis-2/3">
        <span class="hidden transition-all duration-700 group-hover:block">basis-2/4</span>
        <span class="block transition-all duration-700 group-hover:hidden">basis-1/3</span>
        </div>
        </div>