Tailwind CSS Justify Content
This class accepts two values in tailwind CSS. It is the alternative to the CSS justify-content property. This class is used to describe the alignment of the flexible box container. It contains the space between and around content items along the main axis of a flex container. It is basically used for controlling how flex and grid items are positioned along a container’s main axis.
Justify Content classes:
- justify-start
- justify-end
- justify-center
- justify-between
- justify-around
- justify-evenly
justify-start: It is used to align flex items from the start of the container.
Syntax:
<element class="justify-start">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Justify Content Class</b> <div id="main" class="flex justify-start flex-row"> <div class="bg-green-700 w-24 h-12">1</div> <div class="bg-green-600 w-24 h-12">2</div> <div class="bg-green-500 w-24 h-12">3</div> <div class="bg-green-400 w-24 h-12">4</div> </div> </body> </html> |
Output:
justify-end: It is used to align flex items from the end of the container.
Syntax:
<element class="justify-end">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Justify Content Class</b> <div id="main" class="flex justify-end flex-row"> <div class="bg-green-700 w-24 h-12">1</div> <div class="bg-green-600 w-24 h-12">2</div> <div class="bg-green-500 w-24 h-12">3</div> <div class="bg-green-400 w-24 h-12">4</div> </div> </body> </html> |
Output:
justify-center: It is used to align flex items from the center of the container.
Syntax:
<element class="justify-center">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Justify Content Class</b> <div id="main" class="flex justify-center flex-row"> <div class="bg-green-700 w-24 h-12">1</div> <div class="bg-green-600 w-24 h-12">2</div> <div class="bg-green-500 w-24 h-12">3</div> <div class="bg-green-400 w-24 h-12">4</div> </div> </body> </html> |
Output:
justify-between: The flex items are placed with even spacing where the item is pushed to start and the last item is pushed to end.
Syntax:
<element class="justify-between">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Justify Content Class</b> <div id="main" class="flex justify-between flex-row"> <div class="bg-green-700 w-24 h-12">1</div> <div class="bg-green-600 w-24 h-12">2</div> <div class="bg-green-500 w-24 h-12">3</div> <div class="bg-green-400 w-24 h-12">4</div> </div> </body> </html> |
Output:
justify-around: The flex items are placed with equal spacing from each other, the corners.
Syntax:
<element class="justify-around">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Justify Content Class</b> <div id="main" class="flex justify-around flex-row"> <div class="bg-green-700 w-24 h-12">1</div> <div class="bg-green-600 w-24 h-12">2</div> <div class="bg-green-500 w-24 h-12">3</div> <div class="bg-green-400 w-24 h-12">4</div> </div> </body> </html> |
Output:
justify-evenly: The items are positioned with equal spacing between them but the spacing from corners differs.
Syntax:
<element class="justify-evenly">...</element>
Example:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Justify Content Class</b> <div id="main" class="flex justify-evenly flex-row"> <div class="bg-green-700 w-24 h-12">1</div> <div class="bg-green-600 w-24 h-12">2</div> <div class="bg-green-500 w-24 h-12">3</div> <div class="bg-green-400 w-24 h-12">4</div> </div> </body> </html> |
Output:
Please Login to comment...