Tailwind CSS Justify Content - GeeksforGeeks

23 Mar, 2022
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:
Tailwind CSS
Tailwind-Alignment
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?