lugar-yo

La place-selfpropiedad en CSS es una abreviatura de las propiedades align-selfy justify-self, combinándolas en una sola declaración en diseños CSS Grid y Flexbox, donde align-selfy justify-self(solo CSS Grid) son valores que alinean un elemento individual en las direcciones de bloque y en línea.

.element {  place-self: center start;}

La propiedad está incluida en la especificación CSS Box Alignment Module Level 3 , donde se denomina “taquigrafía de autoalineación”. Es un gran apodo para él porque de hecho permite que un elemento se alinee de manera distinta de la alineación de su padre y otros elementos en un grupo, y lo hace combinando dos propiedades en una sola declaración.

Sintaxis

place-self: 'align-self' 'justify-self'?

• Valor inicial: auto
• Se aplica a: cuadros a nivel de bloque, cuadros con posición absoluta y elementos de cuadrícula.
• Heredado: no
• Valor calculado: Como cada una de las propiedades de la taquigrafía: align-selfyjustify-self
• Tipo de animación: discreta

Valores

/* Keyword values */place-self: auto center;place-self: normal start;/* Positional alignment */place-self: center normal;place-self: start auto;place-self: end normal;place-self: self-start auto;place-self: self-end normal;place-self: flex-start auto;place-self: flex-end normal;place-self: left auto;place-self: right normal;/* Baseline alignment */place-self: baseline normal;place-self: first baseline auto;place-self: last baseline normal;place-self: stretch auto;/* Global values */place-self: inherit;place-self: initial;place-self: unset;

Valores de palabras clave

• auto: Esto devuelve el valor proporcionado por la justify-itemspropiedad en el contenedor principal. Si el elemento no tiene un contenedor principal, normalse devuelve en su lugar.
• normal: La forma en que se comporta este valor depende del modo de diseño actual:
  • En diseños con posición absolutastart , la palabra clave se comporta como en cuadros reemplazados con posición absoluta. En todos los demás cuadros absolutamente posicionados, actúa como el stretchvalor.
  • En una posición estática de diseños absolutamente posicionados , la palabra clave se comporta como el stretchvalor.
  • Para elementos flexibles, la palabra clave se comporta como stretch.
  • Para los elementos de la cuadrícula, esta palabra clave genera un comportamiento similar a stretch, excepto para cuadros con una relación de aspecto o tamaños intrínsecos; se comporta como starten esos casos.
  • La propiedad no se aplica en absoluto a cuadros a nivel de bloque o celdas de tabla.

Alineación posicional

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

Alineación de referencia

• baseline: Esto alinea el elemento dentro de un grupo (es decir, celdas dentro de una fila) haciendo coincidir su línea 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 de Fallnack 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.
• 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).

Dos propiedades, una declaración

En eso son tan buenas las propiedades abreviadas en CSS. En lugar de escribir align-selfy justify-selfasí:

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

…podemos simplemente declarar place-selfcuál toma ambos valores:

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

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

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

Es lo mismo que escribir esto:

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

No hay justify-selfen flexbox

Flexbox ignora la justify-selfpropiedad porque la justify-contentpropiedad ya controla cómo se usa ese espacio adicional. En otras palabras, un contenedor flexible ya calcula cuánto espacio se necesita para distribuir sus elementos. Cualquier espacio adicional que quede una vez colocados los elementos es manejado por justify-content. Y dado que justify-selffunciona en los elementos individuales de un contenedor flexible, realmente no es necesario: la justify-contentpropiedad que trabaja en el contenedor flexible ya lo tiene cubierto.

En otras palabras, justify-selfes algo prohibido cuando se trata de flexbox. Sí, es un poco extraño, pero también es una de esas cosas que debes saber al ingresar a Flexbox.

Ahora, ya sea que estemos hablando de la dirección en bloque o en línea se basa exclusivamente en directiony writing-modedel text-orientationelemento. Si es de izquierda a derecha, como en inglés, estamos hablando de la dirección del bloque (vertical). Si es vertical, entonces estamos tratando con la dirección en línea (horizontal). Chris explica las propiedades lógicas con mayor detalle y vale la pena consultarlo para obtener más información.

Ejemplos

Nuestro objetivo está en un diseño de cuadrícula y se ubica en la línea de base en la dirección del bloque (vertical) y en el centro en la dirección en línea (horizontal):

En este ejemplo, nuestro objetivo está en un diseño de cuadrícula y se coloca al final ( flex-end) del contenedor en la dirección del bloque (vertical) y al inicio ( flex-start) del contenedor en la dirección en línea (horizontal):

Ahora, hagamos que el objetivo se coloque al inicio ( flex-start) del contenedor en la dirección del bloque (vertical) y al final ( flex-end) en la dirección en línea (horizontal):

Manifestación

Utilice los controles en la siguiente demostración para alternar los place-selfvalores de los elementos.

Soporte del navegador

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

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
Sí	Todo	81+	11+	59+

Más información

Propiedades lógicas CSS

Chris Coyier

Reglas horizontales bidireccionales en CSS

Chris Coyier

Centrado: la forma más nueva y genial frente a la forma más antigua y genial

Chris Coyier

Propiedades relacionadas

alinear elementos

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

alinearse

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

justificar elementos

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

colocar elementos

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