Flexbox y Grid
Utilidades para controlar cómo se justifica y alinea un elemento individual al mismo tiempo.
| Clase | Estilos |
|---|---|
place-self-auto | place-self: auto; |
place-self-start | place-self: start; |
place-self-end | place-self: end; |
place-self-end-safe | place-self: safe end; |
place-self-center | place-self: center; |
place-self-center-safe | place-self: safe center; |
place-self-stretch | place-self: stretch; |
Utiliza place-self-auto para alinear un elemento según el valor de la propiedad place-items del contenedor:
<div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-auto ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>Utiliza place-self-start para alinear un elemento al inicio en ambos ejes:
<div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-start ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>Utiliza place-self-center para alinear un elemento en el centro en ambos ejes:
<div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-center ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>Utiliza place-self-end para alinear un elemento al final en ambos ejes:
<div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-end ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>Utiliza place-self-stretch para estirar un elemento en ambos ejes:
<div class="grid grid-cols-3 gap-4 ..."> <div>01</div> <div class="place-self-stretch ...">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>Antepone a la utilidad place-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="place-self-start md:place-self-end ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.