Flexbox y Grid
Utilidades para controlar cómo se posicionan los elementos flex y grid a lo largo del eje principal de un contenedor.
| Clase | Estilos |
|---|---|
justify-start | justify-content: flex-start; |
justify-end | justify-content: flex-end; |
justify-end-safe | justify-content: safe flex-end; |
justify-center | justify-content: center; |
justify-center-safe | justify-content: safe center; |
justify-between | justify-content: space-between; |
justify-around | justify-content: space-around; |
justify-evenly | justify-content: space-evenly; |
justify-stretch | justify-content: stretch; |
justify-baseline | justify-content: baseline; |
justify-normal | justify-content: normal; |
Utiliza la utilidad justify-start para alinear los elementos contra el inicio del eje principal del contenedor:
<div class="flex justify-start ..."> <div>01</div> <div>02</div> <div>03</div></div>Utiliza las utilidades justify-center o justify-center-safe para alinear los elementos a lo largo del centro del eje principal del contenedor:
Redimensiona el contenedor para ver el comportamiento de alineación
justify-center
justify-center-safe
<div class="flex justify-center ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div><div class="flex justify-center-safe ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Cuando no haya suficiente espacio disponible, la utilidad justify-center-safe alineará los elementos al inicio del contenedor en lugar de al centro.
Utiliza las utilidades justify-end o justify-end-safe para alinear los elementos contra el final del eje principal del contenedor:
Redimensiona el contenedor para ver el comportamiento de alineación
justify-end
justify-end-safe
<div class="flex justify-end ..."> <div>01</div> <div>02</div> <div>03</div> <div>03</div></div><div class="flex justify-end-safe ..."> <div>01</div> <div>02</div> <div>03</div> <div>03</div></div>Cuando no haya suficiente espacio disponible, la utilidad justify-end-safe alineará los elementos al inicio del contenedor en lugar de al final.
Utiliza la utilidad justify-between para alinear los elementos a lo largo del eje principal del contenedor de modo que haya la misma cantidad de espacio entre cada elemento:
<div class="flex justify-between ..."> <div>01</div> <div>02</div> <div>03</div></div>Utiliza la utilidad justify-around para alinear los elementos a lo largo del eje principal del contenedor de modo que haya la misma cantidad de espacio a cada lado de cada elemento:
<div class="flex justify-around ..."> <div>01</div> <div>02</div> <div>03</div></div>Utiliza la utilidad justify-evenly para alinear los elementos a lo largo del eje principal del contenedor de modo que haya la misma cantidad de espacio alrededor de cada elemento, pero también teniendo en cuenta la duplicación de espacio que normalmente verías entre cada elemento al usar justify-around:
<div class="flex justify-evenly ..."> <div>01</div> <div>02</div> <div>03</div></div>Utiliza la utilidad justify-stretch para permitir que los elementos de contenido con tamaño automático llenen el espacio disponible a lo largo del eje principal del contenedor:
<div class="grid grid-cols-[4rem_auto_4rem] justify-stretch ..."> <div>01</div> <div>02</div> <div>03</div></div>Utiliza la utilidad justify-normal para agrupar los elementos de contenido en su posición predeterminada como si no se hubiera establecido ningún valor de justify-content:
<div class="flex justify-normal ..."> <div>01</div> <div>02</div> <div>03</div></div>Antepone a la utilidad justify-content 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 justify-start md:justify-between ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.