Flexbox y Grid
align-self
Utilidades para controlar cómo se posiciona un elemento flex o grid individual a lo largo del eje transversal de su contenedor.
| Clase | Estilos |
|---|---|
self-auto | align-self: auto; |
self-start | align-self: flex-start; |
self-end | align-self: flex-end; |
self-end-safe | align-self: safe flex-end; |
self-center | align-self: center; |
self-center-safe | align-self: safe center; |
self-stretch | align-self: stretch; |
self-baseline | align-self: baseline; |
self-baseline-last | align-self: last baseline; |
Ejemplos
Auto
Utiliza la utilidad self-auto para alinear un elemento en función del valor de la propiedad align-items del contenedor:
<div class="flex items-stretch ..."> <div>01</div> <div class="self-auto ...">02</div> <div>03</div></div>Inicio
Utiliza la utilidad self-start para alinear un elemento con el inicio del eje transversal del contenedor, independientemente del valor de align-items del contenedor:
<div class="flex items-stretch ..."> <div>01</div> <div class="self-start ...">02</div> <div>03</div></div>Centro
Utiliza la utilidad self-center para alinear un elemento a lo largo del centro del eje transversal del contenedor, independientemente del valor de align-items del contenedor:
<div class="flex items-stretch ..."> <div>01</div> <div class="self-center ...">02</div> <div>03</div></div>Fin
Utiliza la utilidad self-end para alinear un elemento con el final del eje transversal del contenedor, independientemente del valor de align-items del contenedor:
<div class="flex items-stretch ..."> <div>01</div> <div class="self-end ...">02</div> <div>03</div></div>Estirar
Utiliza la utilidad self-stretch para estirar un elemento de manera que llene el eje transversal del contenedor, independientemente del valor de align-items del contenedor:
<div class="flex items-stretch ..."> <div>01</div> <div class="self-stretch ...">02</div> <div>03</div></div>Línea base
Utiliza la utilidad self-baseline para alinear un elemento de manera que su línea base se alinee con la línea base del eje transversal del contenedor flex:
<div class="flex ..."> <div class="self-baseline pt-2 pb-6">01</div> <div class="self-baseline pt-8 pb-12">02</div> <div class="self-baseline pt-12 pb-4">03</div></div>Última línea base
Utiliza la utilidad self-baseline-last para alinear un elemento a lo largo del eje transversal del contenedor de manera que su línea base se alinee con la última línea base del contenedor:
Trabajando en el futuro del reclutamiento de astronautas en Space Recruit.
spacerecruit.com
<div class="grid grid-cols-[1fr_auto]"> <div> <img src="img/spencer-sharp.jpg" /> <h4>Spencer Sharp</h4> <p class="self-baseline-last">Trabajando en el futuro del reclutamiento de astronautas en Space Recruit.</p> </div> <p class="self-baseline-last">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-self 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="self-auto md:self-end ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.