Atributo CSS place-self

Página anterior place-items
Página siguiente pointer-events

Definición y uso

place-self La propiedad se utiliza para alinear el proyecto individual de la cuadrícula y es una abreviatura de las siguientes propiedades:

align-self
justify-self

Si el atributo place-self tiene dos valores:

place-self: start center;

El valor del atributo align-self es 'start'
El valor del atributo justify-self es 'center'

Si el atributo place-self tiene solo un valor:

place-self: end;

entonces los valores de las propiedades align-self y justify-self son 'end'

Ejemplo

Ejemplo 1

Alinear el proyecto de cuadrícula individual en la dirección del bloque y la dirección del renglón a la posición final:

#myDiv {
  place-self: end;
}

Pruebe usted mismo

Ejemplo 2: Modo de escritura

cuando el elemento <div> writing-mode Cuando el valor de atributo se establece en 'vertical-rl', la posición final de la celda de la cuadrícula en la dirección del bloque se mueve desde la parte inferior a la izquierda, y la posición final en la dirección del renglón se mueve desde la derecha a la parte inferior:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

Pruebe usted mismo

Ejemplo 3: Diseño de cajas flexibles

place-self La propiedad también se puede usar en proyectos de cajas flexibles, pero justify-self El segundo valor se ignorará, ya que no es aplicable en el diseño de cajas flexibles:

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

Pruebe usted mismo

Sintaxis de CSS

place-self: auto|value|initial|inherit;

Valor del atributo

Valor	Descripción
auto	Predeterminado. Valor predeterminado de place-self del elemento.
normal	Depende del contexto del diseño, pero para los proyectos de cuadrícula sin tamaño establecido, su comportamiento es similar a 'stretch' en el diseño de cuadrícula. Si se ha establecido el tamaño, el comportamiento del valor del atributo es similar a 'start'.
stretch	Si no se ha establecido el tamaño, se estira para llenar la celda de la cuadrícula.
start	Alinee el proyecto al inicio en ambas direcciones de línea y de bloque.
left	Alinee el proyecto a la izquierda en la dirección de línea, como valor de justify-self.
center	Alinee el proyecto al centro.
end	Alinee el proyecto al final en ambas direcciones de línea y de bloque.
right	Alinee el proyecto a la derecha en la dirección de línea, como valor de justify-self.
Alineación de desbordamiento	'safe': Si el contenido se desborda, configure la alineación del proyecto como 'start' 'unsafe': Mantenga el valor de alineación independientemente de si el contenido del proyecto se desborda o no
Alineación de línea base	El elemento se alinea con la línea base de su elemento padre.
initial	Establezca este atributo en su valor predeterminado. Véase initial.
inherit	Hereda este atributo de su elemento padre. Véase inherit.

Detalles técnicos

Valor predeterminado:	auto
Herencia:	No
Creación de animaciones:	No se admite. Consulte:Atributos relacionados con la animación.
Versión:	CSS3
Sintaxis de JavaScript:	object.style.placeSelf="end stretch"