Flexbox y Grid
Utilidades para controlar cómo se posicionan las filas en contenedores flex y grid de múltiples filas.
| Clase | Estilos |
|---|---|
content-normal | align-content: normal; |
content-center | align-content: center; |
content-start | align-content: flex-start; |
content-end | align-content: flex-end; |
content-between | align-content: space-between; |
content-around | align-content: space-around; |
content-evenly | align-content: space-evenly; |
content-baseline | align-content: baseline; |
content-stretch | align-content: stretch; |
Utiliza content-start para agrupar las filas de un contenedor contra el inicio del eje transversal:
<div class="grid h-56 grid-cols-3 content-start gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Utiliza content-center para agrupar las filas de un contenedor en el centro del eje transversal:
<div class="grid h-56 grid-cols-3 content-center gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Utiliza content-end para agrupar las filas de un contenedor contra el final del eje transversal:
<div class="grid h-56 grid-cols-3 content-end gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Utiliza content-between para distribuir las filas en un contenedor de manera que haya la misma cantidad de espacio entre cada línea:
<div class="grid h-56 grid-cols-3 content-between gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Utiliza content-around para distribuir las filas en un contenedor de manera que haya la misma cantidad de espacio alrededor de cada línea:
<div class="grid h-56 grid-cols-3 content-around gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Utiliza content-evenly para distribuir las filas en un contenedor de manera 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 content-around:
<div class="grid h-56 grid-cols-3 content-evenly gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Utiliza content-stretch para permitir que los elementos de contenido llenen el espacio disponible a lo largo del eje transversal del contenedor:
<div class="grid h-56 grid-cols-3 content-stretch gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Utiliza content-normal para agrupar los elementos de contenido en su posición predeterminada como si no se hubiera establecido ningún valor de align-content:
<div class="grid h-56 grid-cols-3 content-normal gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Antepone a la utilidad align-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="grid content-start md:content-around ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.