Justificar-artículos - Trucos CSS

Tabla de contenido

La justify-itemspropiedad es una subpropiedad del Módulo de alineación de cajas CSS que básicamente controla la alineación de los elementos de la cuadrícula dentro de su alcance.

.element ( justify-items: center; )

justify-itemsalinea los elementos de la cuadrícula a lo largo del eje de la fila (en línea). Específicamente, esta propiedad le permite establecer la alineación de los elementos dentro de un contenedor de cuadrícula (no la cuadrícula en sí) en una posición específica (por ejemplo start, centery end) o con un comportamiento (por ejemplo, autoo stretch).

Cuando justify-itemsse usa, también establece el justify-selfvalor predeterminado para todos los elementos de la cuadrícula, aunque esto se puede anular en el nivel secundario mediante el uso de la justify-selfpropiedad en el propio elemento secundario.

.grid ( display: grid; justify-items: center; ) .grid-item ( justify-self: start; )

Sintaxis

justify-items: normal | stretch | | ? ( | left | right ) | legacy | legacy && ( left | right | center )

Valor inicial: legacy
Se aplica a: todos los elementos
Heredado: no
Valor calculado: como se especifica
Tipo de animación: discreto

Valores

/* Basic keyword values */ justify-items: auto; justify-items: normal; justify-items: stretch; /* Baseline alignment */ justify-items: baseline; justify-items: first baseline; justify-items: last baseline; /* Positional alignment */ justify-items: center; justify-items: start; justify-items: end; justify-items: flex-start; justify-items: flex-end; justify-items: self-start; justify-items: self-end; justify-items: left; justify-items: right; /* Overflow alignment */ /* Used as an optional second value for positional alignment */ justify-items: safe; justify-items: unsafe; /* Legacy */ justify-items: legacy center; justify-items: legacy left; justify-items: legacy right; /* Global values */ justify-items: inherit; justify-items: initial; justify-items: unset;

Valores de palabras clave básicas

stretch: Valor predeterminado. Alinea los elementos para llenar todo el ancho de la celda del elemento de la cuadrícula
auto: igual que el valor de justify-itemsen padre.
normal: Si bien vemos que se justify-itemsusa con mayor frecuencia en un diseño de cuadrícula, técnicamente es para cualquier alineación de cuadro y normalsignifica cosas diferentes en diferentes contextos de diseño, que incluyen:
- diseños a nivel de bloque ( start)
- diseños de cuadrícula stretch
- flexbox (ignorado)
- celdas de la tabla (ignoradas)
- diseños absolutamente posicionados ( start)
- cajas absolutamente posicionadas ( stretch)
- cajas reemplazadas absolutamente posicionadas ( start)

.container ( justify-items: stretch; )

Valores de alineación de línea base

Esto alinea la línea de base de alineación del primer o último conjunto de líneas de base del cuadro con la línea de base correspondiente de su contexto de alineación.

.container ( justify-items: 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

En la siguiente demostración (que se ve mejor en Firefox), vemos cómo los elementos se alinean con la línea de base de una cuadrícula basada en el eje principal.

Valores de alineación posicional

start: Alinea los elementos con el borde inicial del contenedor de alineación
end: Alinea los elementos con el contenedor de alineación del borde final
center: Alinea elementos en el centro del contenedor de alineación
left: Alinea los elementos a la izquierda del contenedor de alineación
right: Alinea los elementos a la derecha del contenedor de alineación
self-start: Alinea los elementos al comienzo de cada celda de elemento de la cuadrícula
self-end: Alinea elementos al final de cada celda de elemento de la cuadrícula

.container ( justify-items: )

.container ( justify-items: )

.container ( justify-items: center; )

Valores de alineación de desbordamiento

La propiedad de desbordamiento determina cómo mostrará el contenido de la cuadrícula cuando el contenido exceda los límites de la cuadrícula. Entonces, cuando el contenido es más grande 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 dice al navegador que cambie la alineación para que no haya pérdida de datos.

safe : Si un elemento desborda el contenedor de alineación, startse utiliza el modo.
unsafe : El valor de alineación se mantiene como está, independientemente del tamaño del elemento o del contenedor de alineación.

Valores heredados

legacy : Cuando se usa con una palabra clave direccional (por ejemplo right, lefto center), esa palabra clave se pasa a los descendientes para que la hereden. Pero si el descendiente declara justify-self: auto;, legacyse ignora pero sigue respetando la palabra clave direccional. El valor se calcula con el valor heredado si no se proporciona una palabra clave direccional. De lo contrario, calcula normal.

Manifestación

Más información

Módulo de alineación de cajas CSS, nivel 3 (borrador de trabajo)
Una guía completa de Grid
Una guía completa de Flexbox

Soporte de navegador

El soporte del navegador justify-itemsabarca toda la gama, ya que se usa en múltiples contextos de diseño, como cuadrícula, caja flexible, celdas de tabla. Pero en general, si se admiten grid y flexbox, entonces puede asumir que justify-itemstambién lo son.

Diseño de cuadrícula

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	16+	45+	57+	10.1+	44+

Android Chrome	Android Firefox	Navegador de Android	Safari de iOS	Opera Mobile
81+	45+	81+	10.1+	59+

Fuente: caniuse

Diseño flexible

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	12+	20+	52+	9+	12.1+

Android Chrome	Android Firefox	Navegador de Android	Safari de iOS	Opera Mobile
87+	83+	81+	9+	12.1+