justificarse

La justify-selfpropiedad en CSS establece la justificación de un elemento dentro de su bloque contenedor. Su comportamiento depende del displaybloque contenedor. Por ejemplo, si el bloque contenedor es un contenedor de cuadrícula (es decir display: grid), podemos justificar el elemento que contiene a lo largo del eje “en línea” (que, a su vez, puede ser vertical u horizontal según el contenido direction).

.element {  justify-self: start;}

justify-selfse define en la especificación CSS Box Alignment Module Nivel 3.

Hablemos de dirección

La dirección es algo relativo en CSS. Es posible que esté acostumbrado a pensar en la dirección en términos de compensaciones, como top, y . Pero no todos los idiomas piensan con la misma orientación de izquierda a derecha (LTR). Es por eso que CSS se está inclinando fuertemente en la dirección (juego de palabras) de las propiedades lógicas .bottomleftright

Las propiedades lógicas en CSS toman en consideración el direction, text-orientationy writing-modedel contenido, luego tratan las direcciones en línea y de bloque en consecuencia. Entonces, en un modo de escritura de izquierda a derecha, en línea significa izquierda y derecha, y bloque significa arriba y abajo. En un modo de escritura vertical, en línea significa arriba y abajo, y bloque significa izquierda y derecha. Esa es la “lógica” en las propiedades lógicas, como margin-inliney margin-blockentre muchas otras propiedades.

¿Qué tiene que ver esto justify-self? Bueno, utiliza valores de palabras clave, como starty end , que significan cosas diferentes en contextos diferentes. justify-selfalinea un elemento a lo largo del eje en línea que es horizontal en un modo de escritura LTR, pero en caso contrario es vertical.

Sintaxis

justify-self: auto | normal | stretch | baseline-position | overflow-position? [ self-position | left | right ]

Valores

/* Basic keywords */justify-self: auto;justify-self: normal;justify-self: stretch;/* Postion keywords */justify-self: start;justify-self: end;justify-self: center;justify-self: left;justify-self: right;justify-self: flex-start;justify-self: flex-end;justify-self: self-start;justify-self: self-end;/* Baseline keywords */justify-self: baseline;justify-self: first-baseline;justify-self: last-baseline;/* Overflow keywords */justify-self: safe center;justify-self: unsafe center;/* Global keywords */justify-self: inherit;justify-self: initial;justify-self: unset;

Valores básicos de palabras clave

• auto: El valor predeterminado. Se comporta como el normalvalor cuando el elemento no está contenido dentro de un padre y cuando el elemento está dentro de un padre que está en posición absoluta (es decir position: absolute). De lo contrario, heredará el justify-itemsvalor del elemento principal, como cuando el elemento está en un contenedor de cuadrícula.
• normal: Toma la alineación predeterminada del cuadro que contiene el elemento. Por lo tanto, esto podría comportarse de varias maneras dependiendo del modo de diseño del elemento que lo contiene, ya sea un diseño de bloque normal o algo más, como un contenedor de cuadrícula.
  • Diseños a nivel de bloque ( start)
  • Diseños de cuadrículastretch
  • Caja flexible (ignorada)
  • Celdas de tabla (ignoradas)
  • Diseños absolutamente posicionados ( start)
  • Cajas absolutamente posicionadas ( stretch)
  • Cajas reemplazadas absolutamente posicionadas ( start)
• stretch: Esto obliga al elemento a ocupar todo el espacio posible en el elemento contenedor, teniendo en cuenta, por supuesto, otros elementos del contenedor. ¿Cuánto se estira? Depende del elemento calculado widthy heightdel elemento en sí, que debe establecerse autopara que este valor surta efecto. Y: si cualquiera de los márgenes a lo largo del eje de alineación se establece en auto, no obtendremos ningún estiramiento.

.element {  justify-self: stretch;}

Valores de palabras clave de posición

• start: El elemento se “empaqueta” a lo largo del borde inicial del contenedor. Por “empaquetado” queremos decir que el borde inicial del elemento se alinea con el borde inicial del contenedor y el elemento no se estira para llenar el resto del espacio disponible.
• end: El elemento se “empaqueta” a lo largo del borde final del contenedor.
• center: El elemento se empaqueta a lo largo del centro del eje de alineación.
• left: El elemento se empaqueta a lo largo del borde izquierdo del contenedor. Si el eje de alineación está en línea, entonces esto es efectivamente lo mismo que start.
• right: El elemento se empaqueta a lo largo del borde derecho del contenedor. Si el eje de alineación está en línea, entonces esto es efectivamente lo mismo que end.
• flex-start: cuando el elemento no es un elemento flexible en un contenedor flexible (es decir, un contenedor no configurado en display: flex), este valor se comporta como start.
• flex-end: cuando el elemento no es un elemento flexible en un contenedor flexible, este valor se comporta como end.
• self-start: El elemento se empaqueta a lo largo de su propio borde inicial, que depende de su dirección.
• self-end: El elemento se empaqueta a lo largo de su propio borde final, que depende de su dirección.

.element {  justify-self: start;}

.element {  justify-self: end;}

.element {  justify-self: center;}

Valores de palabras clave de referencia

Estos alinean la primera o última línea base del elemento con la línea base correspondiente de su contexto de alineación.

.element {  justify-items: first | last baseline;}

• La alineación alternativa para first baselinees safe start.
• La alineación alternativa para last baselinees safe end.
• baselinecorresponde a first baselinecuando se usa solo.

Valores de palabras claves desbordadas

La propiedad de desbordamiento determina cómo se mostrará el contenido de la cuadrícula cuando el contenido excede los límites de la cuadrícula. Por lo tanto, cuando el contenido es mayor que el contenedor de alineación, se producirá un desbordamiento que podría provocar la pérdida de datos. Para evitar esto, podemos usar el safevalor que le indica al navegador que cambie la alineación para que no se pierdan datos.

• safe: El elemento se comportará como si el modo de alineación fuera startsi desborda el elemento contenedor.
• unsafe: Se respeta el valor de alineación del elemento, independientemente del tamaño del elemento contenedor, lo que permite que el elemento desborde el elemento contenedor si su tamaño excede el espacio disponible.

Manifestación

Más información

Momentos divertidos al dimensionar elementos de la cuadrícula.

Geoff Graham

Las áreas de la cuadrícula y el elemento que las ocupan no tienen necesariamente el mismo tamaño.

Chris Coyier

Propiedades relacionadas

contenido alineal

.element { align-content: space-around; } 34cruz

elementos alineales

.element { align-items: flex-start; } 34cruz

alinearse

.box { align-self: flex-end; } 34cruz

justificar-contenido

.element { justify-content: center; } 34cruz

justificar elementos

.element { justify-items: center; } Mohit Khare

colocar elementos

.element { place-items: center; } Geoff Graham