Tailwind CSS Align Content
This class accepts lots of values in Tailwind CSS. It is the alternative to the CSS Align Content property. This class is used for changing the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container. This property defines how each flex line is aligned within a flexbox and is only applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items present.
Align Content Classes:
- content-center
- content-start
- content-end
- content-between
- content-around
- content-evenly
content-center
This class is used to place lines on the center of the flex container.
Syntax:
<element class="content-center">...</element>Example:
<!DOCTYPE html>
<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 Align Content Class</b>
<div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap
content-center
bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-24 h-12">1</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
</div>
</body>
</html>
Output:
content-start
This class is used to place lines on the start of the flex container.
Syntax:
<element class="content-start">...</element>Example:
<!DOCTYPE html>
<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 Align Content Class</b>
<div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap
content-start
bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-24 h-12">1</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
</div>
</body>
</html>
Output:
content-end
This class is used to place lines on the end of the flex container.
Syntax:
<element class="content-end">...</element>Example:
<!DOCTYPE html>
<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 Align Content Class</b>
<div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap
content-end
bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-24 h-12">1</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
</div>
</body>
</html>
Output:
content-between
This class is used to distribute rows in a container such that there is an equal amount of space between each line.
Syntax:
<element class="content-between">...</element>Example:
<!DOCTYPE html>
<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 Align Content Class</b>
<div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap
content-between
bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-24 h-12">1</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
</div>
</body>
</html>
Output:
content-around
This class is used to distribute rows in a container such that there is an equal amount of space around each line.
Syntax:
<element class="content-around">...</element>Example:
<!DOCTYPE html>
<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 Align Content Class</b>
<div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap
content-around
bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-24 h-12">1</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
</div>
</body>
</html>
Output:
content-evenly
This class is used to distribute rows in a container 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 content-around class.
Syntax:
<element class="content-evenly">...</element>Example:
<!DOCTYPE html>
<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 Align Content Class</b>
<div id="main" class="ml-24 h-48 w-2/3 flex flex-wrap
content-evenly
bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-24 h-12">1</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
</div>
</body>
</html>
Output:
