contenido del lugar

La place-contentpropiedad en CSS es una abreviatura de las propiedades align-contenty justify-content, combinándolas en una sola declaración en diseños CSS Grid y Flexbox, donde align-contenty justify-contentson valores que alinean un elemento individual en las direcciones de bloque y en línea.

.element {  display: flex;  place-content: start space-evenly;} 

Entonces, en lugar de escribir align-contenty justify-contentasí:

.item {  display: grid;  align-content: self-start;  justify-content: center;}  

…podemos declarar place-contentcuál toma ambos valores:

.item {  display: grid;  place-content: self-start center;} 

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

.item {  display: grid;  place-content: self-start;} 

…es lo mismo que escribir esto:

.item {  display: grid;  align-content: self-start;  justify-content: self-start;}  

Sintaxis

Esta es solo una forma elegante de decir que place-contentse necesitan dos valores, el primero para el align-contentvalor de la propiedad y el segundo para el justify-contentvalor de la propiedad:

place-content: 'align-content' 'justify-content'?

• Valor inicial: normal
• Se aplica a: contenedores de bloques, contenedores flexibles y contenedores de rejilla
• Heredado: no
• Valor calculado: según lo especificado
• Tipo de animación: discreta

Valores

Algunos excelentes ejemplos de valores y pares de valores extraídos directamente de MDN :

/* Positional alignment *//* align-content does not take left and right values */place-content: center start;place-content: start center;place-content: end left;place-content: flex-start center;place-content: flex-end center;/* Baseline alignment *//* justify-content does not take baseline values */place-content: baseline center;place-content: first baseline space-evenly;place-content: last baseline right;/* Distributed alignment */place-content: space-between space-evenly;place-content: space-around space-evenly;place-content: space-evenly stretch;place-content: stretch space-evenly;/* Global values */place-content: inherit;place-content: initial;place-content: unset;

A veces ayuda tener una imagen:

align-content

justify-content

Valores de alineación posicional

Cuando hablamos de alineación “posicional”, nos referimos a valores con nombre que indican en qué borde del contenedor están alineados los elementos. Todos estos valores se aplican a align-contenty justify-content, excepto lefty right, que no son compatibles con justify-content.

• self-start: Esto alinea los elementos con el borde inicial del contenedor.
• self-end: Esto alinea los elementos con el borde final del contenedor.
• flex-start: Esto se usa en un diseño flexible, donde los elementos se colocan al borde inicial del contenedor.
• flex-end: Esto se usa en un diseño flexible, donde los elementos se alinean hasta el borde final del contenedor.
• center: Esto centra los elementos dentro de su contenedor.
• left: Esto vacía los elementos hacia el borde izquierdo del contenedor.
• right: Esto descarga los elementos hacia el borde derecho del contenedor.

Valores de alineación de referencia

Una línea de base alinea todos los elementos dentro de un grupo (es decir, celdas dentro de una fila) haciendo coincidir sus líneas de base de manera que sus bordes superior o inferior estén alineados.

• baseline: Esto alinea los elementos dentro de un grupo haciendo coincidir sus líneas base de alineación con las líneas base del grupo. El valor predeterminado es firstsi baselinese usa solo.
• first baseline: Esto alinea la línea base de alineación del primer conjunto de líneas base del cuadro con la línea base correspondiente en el primer conjunto de líneas base compartido de todos los cuadros en su grupo de línea base compartida. La alineación alternativa es start.
• last baseline: Esto alinea la línea base de alineación del último conjunto de líneas base del cuadro con la línea base correspondiente en el último conjunto de líneas base compartido de todos los cuadros en su grupo de línea base compartida. La alineación alternativa es end.

Valores de alineación distribuidos

¿Cómo se deben distribuir los elementos en el contenedor? ¿Deberían separarse? ¿Deberían estirarse para llenar el espacio disponible? Ese es el tipo de cosas que definen los siguientes valores.

• space-between: Los elementos se distribuyen uniformemente dentro del contenedor de alineación. El espacio entre cada par de elementos adyacentes es el mismo.
• space-around: Los elementos se distribuyen uniformemente dentro del contenedor de alineación. El espacio entre cada par de elementos adyacentes es el mismo.
• space-evenly: Los elementos se distribuyen uniformemente dentro del contenedor de alineación. El espacio entre cada par de elementos es exactamente el mismo.
• stretch: Se utiliza para estirar un elemento en ambos ejes, respetando al mismo tiempo las restricciones impuestas por las propiedades max-heighty max-width(o funcionalidad equivalente).

Ejemplos

place-content: space-around start;

Hay espacio para respirar alrededor de los elementos ( space-around) y se enjuagan hasta el borde inicial ( start) del contenedor.

place-content: end center;

Los elementos se enrasan hasta el borde final ( end) del contenedor en la dirección del bloque y luego se centran en la dirección en línea.

place-content: space-between center;

Aquí empujamos los elementos en los bordes opuestos del contenedor ( space-between) en la dirección del bloque y luego centerlos centramos ( ) en la dirección en línea.

Manifestación

Juegue con los controles en la siguiente demostración para ver cómo cambiar los valores de place-contentcambia la alineación de los elementos.

Soporte del navegador

Esta propiedad está incluida en la especificación CSS Box Alignment Model Level 3 , que actualmente se encuentra en estado de Borrador de trabajo.

La compatibilidad con el navegador es bastante amplia y estable tanto en diseños CSS Grid como Flexbox.

Soporte de red

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	79+	53+	59+	11+	46+

Safari iOS	Android Chrome	Firefox Android	Navegador de Android	Ópera móvil
90+	87+	90+	11+	59+

Soporte de caja flexible

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	79+	45+	59+	9+	46+

Safari iOS	Android Chrome	Firefox Android	Navegador de Android	Ópera móvil
14,5+	90+	87+	90+	62+

Más información

Una guía completa de Flexbox

Chris Coyier

Propiedades relacionadas

alinear contenido

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

justificar-contenido

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

colocar elementos

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