Flexbox y Grid
align-items
Utilidades para controlar cómo se posicionan los elementos flex y grid a lo largo del eje transversal de un contenedor.
| Clase | Estilos |
|---|---|
items-start | align-items: flex-start; |
items-end | align-items: flex-end; |
items-end-safe | align-items: safe flex-end; |
items-center | align-items: center; |
items-center-safe | align-items: safe center; |
items-baseline | align-items: baseline; |
items-baseline-last | align-items: last baseline; |
items-stretch | align-items: stretch; |
Ejemplos
Estirar
Utiliza la utilidad items-stretch para estirar los elementos de manera que llenen el eje transversal del contenedor:
<div class="flex items-stretch ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Inicio
Utiliza la utilidad items-start para alinear los elementos con el inicio del eje transversal del contenedor:
<div class="flex items-start ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Centro
Utiliza la utilidad items-center para alinear los elementos a lo largo del centro del eje transversal del contenedor:
<div class="flex items-center ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Fin
Utiliza la utilidad items-end para alinear los elementos con el final del eje transversal del contenedor:
<div class="flex items-end ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Línea base
Utiliza la utilidad items-baseline para alinear los elementos a lo largo del eje transversal del contenedor de manera que todas sus líneas base se alineen:
<div class="flex items-baseline ..."> <div class="pt-2 pb-6">01</div> <div class="pt-8 pb-12">02</div> <div class="pt-12 pb-4">03</div></div>Última línea base
Utiliza la utilidad items-baseline-last para alinear los elementos a lo largo del eje transversal del contenedor de manera que todas sus líneas base se alineen con la última línea base del contenedor:
Trabajando en el futuro del reclutamiento de astronautas en Space Recruit.
Un diseñador multidisciplinario.
<div class="grid grid-cols-[1fr_auto] items-baseline-last"> <div> <img src="img/spencer-sharp.jpg" /> <h4>Spencer Sharp</h4> <p>Trabajando en el futuro del reclutamiento de astronautas en Space Recruit.</p> </div> <p>spacerecruit.com</p></div>Esto es útil para garantizar que los elementos de texto se alineen entre sí, incluso si tienen diferentes alturas.
Diseño responsivo
Antepone a la utilidad align-items el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="flex items-stretch md:items-center ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.