Tailwind CSS Align Self
This class accepts lots of values in tailwind CSS. It is the alternative to the CSS Align Self property. This class is used to control how an individual flex or grid item is positioned along its container’s cross axis.
Align Self Classes:
- self-auto
- self-start
- self-end
- self-center
- self-stretch
self-auto: This class is used to inherit its parent container align-items property or stretched if it has no parent container. It is a default value.
Syntax:
<element class="self-auto">...</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 Self Class</b> <div id="main" class="p-2 justify-around ml-32 h-48 w-2/3 flex iitems-stretch bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 rounded-lg w-32">1</div> <div class="self-auto bg-green-800 rounded-lg w-32">2</div> <div class="bg-green-700 rounded-lg w-32">3</div> </div> </body> </html> |
Output:
self-start: This class is used to align the selected item at the beginning of the flexible container.
Syntax:
<element class="self-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 Self Class</b> <div id="main" class="p-2 justify-around ml-32 h-48 w-2/3 flex iitems-stretch bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 rounded-lg w-32">1</div> <div class="self-start bg-green-800 rounded-lg w-32">2</div> <div class="bg-green-700 rounded-lg w-32">3</div> </div> </body> </html> |
Output:
self-end: This class is used to align the selected item at the end of the flexible container.
Syntax:
<element class="self-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 Self Class</b> <div id="main" class="p-2 justify-around ml-32 h-48 w-2/3 flex iitems-stretch bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 rounded-lg w-32">1</div> <div class="self-end bg-green-800 rounded-lg w-32">2</div> <div class="bg-green-700 rounded-lg w-32">3</div> </div> </body> </html> |
Output:
self-center: This class is used to place the item at the center of the flexible container.
Syntax:
<element class="self-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 Self Class</b> <div id="main" class="p-2 justify-around ml-32 h-48 w-2/3 flex iitems-stretch bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 rounded-lg w-32">1</div> <div class="self-center bg-green-800 rounded-lg w-32">2</div> <div class="bg-green-700 rounded-lg w-32">3</div> </div> </body> </html> |
Output:
self-stretch: This class is used to position the elements to fit the container.
Syntax:
<element class="self-stretch">...</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 Self Class</b> <div id="main" class="p-2 justify-around ml-32 h-48 w-2/3 flex iitems-stretch bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 rounded-lg w-32">1</div> <div class="self-stretch bg-green-800 rounded-lg w-32">2</div> <div class="bg-green-700 rounded-lg w-32">3</div> </div> </body> </html> |
Output:
Please Login to comment...