Justificar-artículos - Trucos CSS

Anonim

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+
Fuente: caniuse

Propiedades relacionadas

Almanaque el 27 oct 2019

alinear-elementos

Geoff Graham