Esta clase acepta muchos valores en Tailwind CSS . Es la alternativa a la propiedad CSS Align Items . Esta clase se usa para establecer la alineación de los elementos dentro del contenedor flexible o en la ventana dada. Alinea los elementos flexibles a lo largo del eje. La clase align-self se usa para anular la clase align-items.
Alinear clases de artículos:
- artículos-comienzo
- artículos-fin
- Centro de artículos
- artículos-línea de base
- artículos-estirar
items-start: los elementos se colocarán al principio del contenedor.
Sintaxis:
<element class="items-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 Items Class</b> <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex items-start bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 rounded-lg py-4 w-32">1</div> <div class="bg-green-800 rounded-lg py-12 w-32">2</div> <div class="bg-green-700 rounded-lg py-8 w-32">3</div> </div> </body> </html>
Producción:
items-end: los artículos se colocarán al final del contenedor.
Sintaxis:
<element class="items-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 Items Class</b> <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex items-end bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 rounded-lg py-4 w-32">1</div> <div class="bg-green-800 rounded-lg py-12 w-32">2</div> <div class="bg-green-700 rounded-lg py-8 w-32">3</div> </div> </body> </html>
Producción:
items-center: La posición de los artículos debe ser el centro del contenedor verticalmente.
Sintaxis:
<element class="items-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 Items Class</b> <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex items-center bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 rounded-lg py-4 w-32">1</div> <div class="bg-green-800 rounded-lg py-12 w-32">2</div> <div class="bg-green-700 rounded-lg py-8 w-32">3</div> </div> </body> </html>
Producción:
items-baseline: los elementos se colocarán en la línea de base del contenedor.
Sintaxis:
<element class="items-baseline">...</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 Items Class</b> <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex items-baseline bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 rounded-lg py-4 w-32">1</div> <div class="bg-green-800 rounded-lg py-12 w-32">2</div> <div class="bg-green-700 rounded-lg py-8 w-32">3</div> </div> </body> </html>
Producción:
items-stretch: los elementos se estiran para ajustarse al contenedor y es el valor predeterminado.
Sintaxis:
<element class="items-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 Items Class</b> <div id="main" class="p-2 justify-around ml-32 h-26 w-2/3 flex items-stretch bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 rounded-lg py-4 w-32">1</div> <div class="bg-green-800 rounded-lg py-12 w-32">2</div> <div class="bg-green-700 rounded-lg py-8 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