Artículos de lugar - Trucos CSS

La place-itemspropiedad en CSS es una abreviatura de las propiedades align-itemsy justify-items, combinándolas en una sola declaración.

Un uso común es el centrado horizontal y vertical con Grid:

.center-inside-of-me ( display: grid; place-items: center; )

Estas propiedades se han utilizado con la introducción de los diseños Flexbox y Grid, pero también se aplican a:

• Cajas a nivel de bloque
• Cajas absolutamente posicionadas
• Posición estática de cajas absolutamente posicionadas
• Celdas de tabla

Sintaxis

La propiedad acepta valores duales, el primero para align-itemsy el segundo para justify-items. Como actualización, align-itemsalinea el contenido a lo largo del eje vertical (columna) mientras que lo justify-itemsalinea a lo largo del eje horizontal (fila).

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

Esto es lo mismo que escribir:

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

Si solo se proporciona un valor, establece ambas propiedades. Por ejemplo, esto:

.item ( display: grid; place-items: start; )

... es lo mismo que escribir esto:

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

Valores aceptados

Lo que hace que esta propiedad sea interesante es que se comporta de manera diferente según el contexto en el que se utiliza. Por ejemplo, algunos valores solo se aplican a Flexbox y no funcionarán en una configuración de cuadrícula. Además, algunos valores se aplican a la align-itemspropiedad mientras que otros se aplican al justify-itemslateral.

Además, se puede pensar que los valores en sí caen en varios tipos de alineación: contextual, de distribución, posicional (que se vuelve autoposicional si se aplica directamente a un elemento secundario en el diseño) y línea base.

Rachel Andrew tiene una excelente hoja de trucos sobre alineación de cajas que ayuda a ilustrar el efecto de los valores.

Valor	Escribe	Descripción
auto	Contextual	El valor se ajusta en consecuencia según el contexto del elemento. Utiliza el justify-itemsvalor del elemento padre del elemento. Si no existe un padre o se aplica a un elemento que está posicionado con absolute, el valor se convierte en normal.
normal	Contextual	Toma el comportamiento predeterminado del contexto de diseño donde se aplica. • Diseños a nivel de bloque: start • Posicionamiento absoluto: startpara elementos absolutos reemplazados y stretchpara todos los demás • Diseños de tabla: el valor se ignora • Diseños de caja flexible: se ignora el valor • Diseños de cuadrícula:, a stretchmenos que se use una relación de aspecto o tamaño intrínseco donde se comporta me gustastart
stretch	Distribución	Expande el elemento a ambos bordes del contenedor verticalmente para align-itemsy horizontalmente para justify-items.
start	Posicional	Todos los elementos están alineados entre sí en el borde inicial (izquierdo) del contenedor.
end	Posicional	Todos los elementos están alineados entre sí en el borde final (derecho) del contenedor
center	Posicional	Los artículos están alineados uno al lado del otro hacia el centro del contenedor
left	Posicional	Los artículos están alineados uno al lado del otro hacia el lado izquierdo del contenedor. Si la propiedad no es paralela a un eje superior, derecho, inferior, izquierdo estándar, entonces se comporta como end.
right	Posicional	Los artículos están alineados uno al lado del otro hacia el lado derecho del contenedor. Si la propiedad no es paralela a un eje superior, derecho, inferior, izquierdo estándar, entonces se comporta como start.
flex-start	Posicional	Un valor de solo caja flexible (que retrocede hasta start) donde los artículos se empaquetan hacia el borde inicial del contenedor.
flex-end	Posicional	Un valor de solo caja flexible (que retrocede a end) donde los artículos se empaquetan hacia el borde final del contenedor.
self-start	Auto-posicional	Permite que un elemento de un diseño se alinee con el borde del contenedor según su propio lado inicial. Básicamente anula el valor establecido en el padre.
self-end	Auto-posicional	Permite que un elemento de un diseño se alinee con el borde del contenedor en función de su propio lado final en lugar de heredar el valor posicional del contenedor. Básicamente anula el valor establecido en el padre.
first baseline last baseline	Base	Alinea todos los elementos dentro de un grupo (es decir, celdas dentro de una fila) haciendo coincidir sus líneas de base de alineación. El valor predeterminado es firstsi baselinese usa solo.

Soporte del navegador

Esta propiedad está incluida en la especificación CSS Box Alignment Model Level 3.

La compatibilidad con el navegador se ha vuelto bastante amplia y en gran medida solo se puede utilizar:

• Edge 79+ (transición posterior al cromo)
• Firefox 45+
• Chrome 59+
• Safari 11+

Referencias

• Modelo de alineación de caja CSS Nivel 3 : la especificación oficial donde place-itemsse define inicialmente la propiedad.
• Red de desarrolladores de Mozilla: la documentación del equipo de Mozilla.
• Hoja de referencia de alineación de cajas : el esquema de Rachel Andrew es un recurso muy útil para comprender los términos de alineación y sus definiciones.