Esta clase acepta muchos valores en Tailwind CSS . Es la alternativa a la propiedad CSS Align Self . Esta clase se utiliza para controlar cómo se coloca un elemento de rejilla o flexible individual a lo largo del eje transversal de su contenedor.
Alinear clases propias:
- auto-auto
- auto-inicio
- fin propio
- Centro de atencion
- autoestiramiento
self-auto: esta clase se usa para heredar la propiedad de elementos de alineación de su contenedor principal o se extiende si no tiene un contenedor principal. Es un valor predeterminado.
Sintaxis:
<element class="self-auto">...</element>
Ejemplo:
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>
Producción:
autoinicio: esta clase se utiliza para alinear el elemento seleccionado al comienzo del contenedor flexible.
Sintaxis:
<element class="self-start">...</element>
Ejemplo:
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>
Producción:
self-end: esta clase se utiliza para alinear el elemento seleccionado al final del contenedor flexible.
Sintaxis:
<element class="self-end">...</element>
Ejemplo:
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>
Producción:
self-center: Esta clase se utiliza para colocar el artículo en el centro del contenedor flexible.
Sintaxis:
<element class="self-center">...</element>
Ejemplo:
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>
Producción:
self-stretch: Esta clase se utiliza para posicionar los elementos para que encajen en el contenedor.
Sintaxis:
<element class="self-stretch">...</element>
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA