Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Align Content

  • Last Updated : 09 Feb, 2021

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :