Open In App

Tailwind CSS Align Content

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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:

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 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:

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 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:

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 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:

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 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:

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 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:

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 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:



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads