Flexbox y Grid
Utilidades para controlar cómo se alinea un elemento individual de la cuadrícula a lo largo de su eje en línea.
| Clase | Estilos |
|---|---|
justify-self-auto | justify-self: auto; |
justify-self-start | justify-self: start; |
justify-self-center | justify-self: center; |
justify-self-center-safe | justify-self: safe center; |
justify-self-end | justify-self: end; |
justify-self-end-safe | justify-self: safe end; |
justify-self-stretch | justify-self: stretch; |
Utiliza la utilidad justify-self-auto para alinear un elemento según el valor de la propiedad justify-items de la cuadrícula:
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-auto ...">02</div> <!-- ... --></div>Utiliza la utilidad justify-self-start para alinear un elemento de la cuadrícula al inicio de su eje en línea:
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-start ...">02</div> <!-- ... --></div>Utiliza las utilidades justify-self-center o justify-self-center-safe para alinear un elemento de la cuadrícula a lo largo del centro de su eje en línea:
Redimensiona el contenedor para ver el comportamiento de alineación
justify-self-center
justify-self-center-safe
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-center ...">02</div> <!-- ... --></div><div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-center-safe ...">02</div> <!-- ... --></div>Cuando no haya suficiente espacio disponible, la utilidad justify-self-center-safe alineará el elemento al inicio del contenedor en lugar de al final.
Utiliza las utilidades justify-self-end o justify-self-end-safe para alinear un elemento de la cuadrícula al final de su eje en línea:
Redimensiona el contenedor para ver el comportamiento de alineación
justify-self-end
justify-self-end-safe
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-end ...">02</div> <!-- ... --></div><div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-end-safe ...">02</div> <!-- ... --></div>Cuando no haya suficiente espacio disponible, la utilidad justify-self-end-safe alineará el elemento al inicio del contenedor en lugar de al final.
Utiliza la utilidad justify-self-stretch para estirar un elemento de la cuadrícula hasta llenar el área de la cuadrícula en su eje en línea:
<div class="grid justify-items-start ..."> <!-- ... --> <div class="justify-self-stretch ...">02</div> <!-- ... --></div>Antepone a la utilidad justify-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="justify-self-start md:justify-self-end ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.