Ejemplo de CSS justify-self

los CSSjustify-self La propiedad establece la forma en que se justifica una caja dentro de su contenedor de alineación a lo largo del eje apropiado.

El efecto de esta propiedad depende del modo de diseño en el que nos encontremos:

• En diseños a nivel de bloque, alinea un elemento dentro de su bloque contenedor en el eje en línea.
• Para elementos absolutamente posicionados, alinea un elemento dentro de su bloque contenedor en el eje en línea, teniendo en cuenta los valores de compensación de la parte superior, izquierda, inferior y derecha.
• En diseños de celda de tabla, esta propiedad es ignorado (más sobre alineación en bloque, posicionamiento absoluto y diseño de tabla)
• En diseños de caja flexible, esta propiedad es ignorado (más sobre alineación en Flexbox)
• En diseños de cuadrícula, alinea un elemento dentro de su área de cuadrícula en el eje en línea (más sobre alineación en diseños de cuadrícula)

Sintaxis

/* Basic keywords */justify-self: auto;justify-self: normal;justify-self: stretch;/* Positional alignment */justify-self: center;/* Pack item around the center */justify-self: start;/* Pack item from the start */justify-self: end;/* Pack item from the end */justify-self: flex-start;/* Equivalent to 'start'. Note that justify-self is ignored in Flexbox layouts. */justify-self: flex-end;/* Equivalent to 'end'. Note that justify-self is ignored in Flexbox layouts. */justify-self: self-start;justify-self: self-end;justify-self: left;/* Pack item from the left */justify-self: right;/* Pack item from the right *//* Baseline alignment */justify-self: baseline;justify-self: first baseline;justify-self: last baseline;/* Overflow alignment (for positional alignment only) */justify-self: safe center;justify-self: unsafe center;/* Global values */justify-self: inherit;justify-self: initial;justify-self: unset;

Esta propiedad puede adoptar una de tres formas diferentes:

• Palabras clave básicas: uno de los valores de las palabras clave normal, auto, o stretch.
• Alineación de la línea de base: el baseline palabra clave, más opcionalmente una de first o last.
• Alineación posicional:
  • uno de: center, start, end, flex-start, flex-end, self-start, self-end, left, o right.
  • Plus opcionalmente safe o unsafe.

Valores

auto

El valor utilizado es el valor de la justify-items propiedad de la caja de los padres, a menos que la caja no tenga un padre, o esté absolutamente posicionado, en estos casos, auto representa normal.

normal

El efecto de esta palabra clave depende del modo de diseño en el que nos encontremos:

• En diseños a nivel de bloque, la palabra clave es sinónimo de start.
• En diseños absolutamente posicionados, la palabra clave se comporta como start sobre reemplazado cajas absolutamente posicionadas, y como stretch sobre todos los demás Cajas absolutamente posicionadas.
• En diseños de celda de tabla, esta palabra clave no tiene significado ya que esta propiedad es ignorado.
• En diseños de caja flexible, esta palabra clave no tiene significado ya que esta propiedad es ignorado.
• En diseños de cuadrícula, esta palabra clave conduce a un comportamiento similar al de stretch, a excepción de las cajas con una relación de aspecto o un tamaño intrínseco donde se comporta como start.

start

El artículo se empaqueta al ras entre sí hacia el borde inicial del contenedor de alineación en el eje apropiado.

end

El artículo se empaqueta al ras entre sí hacia el borde final del contenedor de alineación en el eje apropiado.

flex-start

Para los elementos que no son hijos de un contenedor flexible, este valor se trata como start.

flex-end

Para los elementos que no son hijos de un contenedor flexible, este valor se trata como end.

self-start

El artículo se empaqueta al ras del borde del contenedor de alineación del lado inicial del artículo, en el eje correspondiente.

self-end

El artículo se empaqueta al ras del borde del contenedor de alineación del lado del extremo del artículo, en el eje correspondiente.

center

Los artículos se empaquetan alineados entre sí hacia el centro del contenedor de alineación.

left

Los artículos se empaquetan alineados entre sí hacia el borde izquierdo del contenedor de alineación. Si el eje de la propiedad no es paralelo al eje en línea, este valor se comporta como start.

right

Los artículos se empaquetan alineados entre sí hacia el borde derecho del contenedor de alineación en el eje apropiado. Si el eje de la propiedad no es paralelo al eje en línea, este valor se comporta como start.

baseline
first baseline
last baseline

Especifica la participación en la alineación de primera o última línea de base: alinea la línea de base de alineación del primer o último conjunto de línea de base del cuadro con la línea de base correspondiente en el primer o último conjunto de línea de base compartido de todos los cuadros en su grupo de uso compartido de línea de base.
La alineación alternativa para first baseline es start, el de last baseline es end.

stretch

Si el tamaño combinado de los elementos es menor que el tamaño del contenedor de alineación, cualquier auto-los artículos de tamaño tienen su tamaño incrementado igualmente (no proporcionalmente), mientras se respetan las restricciones impuestas por max-height/max-width (o una funcionalidad equivalente), de modo que el tamaño combinado llene exactamente el contenedor de alineación.

safe

Si el tamaño del elemento desborda el contenedor de alineación, el elemento se alinea como si el modo de alineación fuera start.

unsafe

Independientemente de los tamaños relativos del elemento y el contenedor de alineación, se respeta el valor de alineación dado.

Definicion formal

Sintaxis formal

auto | normal | stretch ||?[| left | right ]
where 
 = [ first | last ]? baseline
 = unsafe | safe
 = center | start | end | self-start | self-end | flex-start | flex-end

Ejemplos de

Demostración simple

En el siguiente ejemplo, tenemos un diseño de cuadrícula simple de 2 x 2. Inicialmente, el contenedor de rejilla recibe un justify-items valor de stretch – el predeterminado – que hace que los elementos de la cuadrícula se extiendan por todo el ancho de sus celdas.

A los elementos de la cuadrícula segundo, tercero y cuarto se les asignan valores diferentes de justify-self, para mostrar cómo estos anulan el justify-items valor. Estos valores hacen que los elementos de la cuadrícula se extiendan solo hasta el ancho de su contenido y se alineen en diferentes posiciones en sus celdas.

HTML

<articleclass="container"><span>First childspan><span>Second childspan><span>Third childspan><span>Fourth childspan>article>

CSS

htmlfont-family: helvetica, arial, sans-serif;letter-spacing: 1px;articlebackground-color: red;display: grid;grid-template-columns: 1fr 1fr;grid-auto-rows: 40px;grid-gap: 10px;width: 300px;justify-items: stretch;span:nth-child(2)justify-self: start;span:nth-child(3)justify-self: center;span:nth-child(4)justify-self: end;article spanbackground-color: black;color: white;margin: 1px;text-align: center;article, spanpadding: 10px;border-radius: 7px;articlemargin: 20px;

Resultado

Especificaciones

Compatibilidad del navegador

Las tablas BCD solo se cargan en el navegador

Soporte en diseño de cuadrícula

Las tablas BCD solo se cargan en el navegador

Ver también

• Guía de cuadrícula CSS: Alineación de cajas en diseños de cuadrícula CSS
• Alineación de caja CSS
• los justify-items propiedad