justify-self

justify-self

Utilidades para controlar cómo se alinea un elemento de grid individual a lo largo de su eje en línea.

Clase Estilos

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;`

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;

Ejemplos

Auto

Usa la utilidad justify-self-auto para alinear un elemento basándose en el valor de la propiedad justify-items del grid:

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-auto ...">02</div>
  <!-- ... -->
</div>

Inicio

Usa la utilidad justify-self-start para alinear un elemento de grid al inicio de su eje en línea:

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-start ...">02</div>
  <!-- ... -->
</div>

Centro

Usa las utilidades justify-self-center o justify-self-center-safe para alinear un elemento de grid a lo largo del centro de su eje en línea:

Redimensiona el contenedor para ver el comportamiento de la alineación

justify-self-center

justify-self-center-safe

justify-self-center

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">02</div>
  <!-- ... -->
</div>

justify-self-center-safe

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center-safe ...">02</div>
  <!-- ... -->
</div>

Cuando no hay suficiente espacio disponible, la utilidad justify-self-center-safe alineará el elemento al inicio del contenedor en lugar del final.

Fin

Usa las utilidades justify-self-end o justify-self-end-safe para alinear un elemento de grid al final de su eje en línea:

Redimensiona el contenedor para ver el comportamiento de la alineación

justify-self-end

justify-self-end-safe

justify-self-end

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end ...">02</div>
  <!-- ... -->
</div>

justify-self-end-safe

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end-safe ...">02</div>
  <!-- ... -->
</div>

Cuando no hay suficiente espacio disponible, la utilidad justify-self-end-safe alineará el elemento al inicio del contenedor en lugar del final.

Stretch

Usa la utilidad justify-self-stretch para estirar un elemento de grid para llenar el área del grid en su eje en línea:

<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="justify-self-stretch ...">02</div>
  <!-- ... -->
</div>

Responsive design

Prefija una utilidad justify-self con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="justify-self-start md:justify-self-end ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.

En esta página