Atributo CSS justify-self

Definición y uso

El atributo justify-self alinea los elementos de cuadrícula dentro de la celda de cuadrícula en la dirección de línea.

Para las páginas en inglés, la dirección de línea es de izquierda a derecha, y la dirección de bloque es hacia abajo.

Para que este atributo tenga algún efecto de alineamiento, el elemento de cuadrícula debe dejar espacio disponible alrededor de sí mismo en la dirección de línea.

Consejo:Para alinear los elementos de cuadrícula en la dirección de bloque en lugar de en la dirección de línea, utilice Atributo align-self O Atributo align-items Atributos.

Vea también:

Tutorial CSS:CSS Grid

Tutorial CSS:Posicionamiento CSS

Manual de referencia de CSS:Atributo align-content

Manual de referencia de CSS:Atributo align-items

Manual de referencia de CSS:Atributo align-self

Manual de referencia de CSS:Atributo direction

Manual de referencia de CSS:Atributo grid

Manual de referencia de CSS:Atributo grid-template-columns

Manual de referencia de CSS:Atributo position

Manual de referencia de CSS:Atributo writing-mode

Vea también:

Ejemplo

Ejemplo 1

Alinear el elemento de cuadrícula en el lado derecho de la celda de cuadrícula:

.red {
  display: grid;
  justify-self: right;
}

Intente hacerlo usted mismo

Ejemplo 2: justify-self vs justify-items

Establecer el alineamiento relativo del contenedor en 'centrado', y el elemento de cuadrícula en 'alineado a la derecha'. El valor de atributo 'right' tiene ventaja:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Intente hacerlo usted mismo

Ejemplo 3: Establecer justify-self en un elemento de cuadrícula absolutamente posicionado

Establecer el alineamiento del elemento de cuadrícula absolutamente posicionado en 'right':

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

Intente hacerlo usted mismo

Ejemplo 4: writing-mode

Cuando el valor del atributo writing-mode del elemento contenedor de red se establece en vertical-rl, la dirección de la línea es hacia abajo. El resultado es que el punto de partida del contenedor se mueve desde la izquierda hasta la parte superior, y el extremo del contenedor se mueve desde la derecha hasta la parte inferior:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Intente hacerlo usted mismo

Ejemplo 5: direction

Cuando el atributo direction del elemento contenedor de cuadrícula se establece en 'rtl', la dirección de línea en línea es de derecha a izquierda. El resultado es que el punto de partida del contenedor se mueve desde la izquierda a la derecha y el extremo del contenedor se mueve desde la derecha a la izquierda:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Intente hacerlo usted mismo

Sintaxis de CSS

justify-self: auto|normal|stretch|Alineación posicional|overflow-alignment|Alineación de línea base|initial|inherit;

Valor del atributo

Valor Descripción
auto Predeterminado. Hereda el valor del atributo justify-self del contenedor de cuadrícula.
normal

Depende del contexto de diseño, pero es similar al 'stretch' del elemento de cuadrícula en el diseño de cuadrícula sin establecer size.

Si se establece size, el comportamiento del valor del atributo es similar a 'start'.
stretch Si no se establece inline-size (ancho), se estira para llenar la celda de la cuadrícula.
start Alinea el proyecto al principio de la dirección de línea.
left Alinea el proyecto a la izquierda.
center Alinea el proyecto al centro.
end Alinea el proyecto al final de la dirección de línea.
right Alinea el proyecto a la derecha.
overflow-alignment
  • 'safe' establecerá el modo de alineación del proyecto en 'start', si el contenido se desborda.
  • 'unsafe' mantiene el valor de alineación, independientemente de si el contenido del proyecto se desborda.
Alineación de línea base El elemento se alinea con la línea base del elemento padre.
initial Establezca este atributo en su valor predeterminado. Vea: initial.
inherit Hereda este atributo del elemento padre. Vea: inherit.

Detalles técnicos

Valor predeterminado: auto
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.justifySelf="right"

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente esta propiedad.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0