Tailwind CSS Justify Content
Last Updated :
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=
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=
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=
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=
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=
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=
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...