La propiedad place-self de CSS es la abreviatura de la propiedad align-self y allow-self . Una propiedad abreviada en CSS significa que puede establecer los valores de múltiples propiedades en una sola propiedad. Aquí, la propiedad place-self puede contener el valor de la propiedad align-self y justifica-self.
Sintaxis:
place-self: align-self-property-value justify-self-property-value
Valores de propiedad: esta propiedad acepta todos los valores de combinación posibles que pueden hacer los valores de propiedad align-items y allow-items.
- auto: esta propiedad se utiliza si los elementos no tienen padre. Esta propiedad se utiliza luego para definir la posición absoluta de los elementos.
- normal: esta propiedad depende del modo de diseño actual.
- inicio: esta propiedad se usa para alinear elementos flexibles desde el inicio del contenedor.
- end: esta propiedad se usa para alinear elementos flexibles desde el final del contenedor.
- flex-start: esta propiedad se usa para mostrar las líneas al comienzo del contenedor flexible.
- flex-end: esta propiedad se usa para mostrar las líneas flexibles al final del contenedor flexible.
- center: esta propiedad se utiliza para alinear elementos flexibles con el centro del contenedor.
- inicio automático: esta propiedad se usa para empacar artículos alineados con el contenedor de alineación con el lado de inicio del artículo.
- self-end: esta propiedad se utiliza para empaquetar artículos alineados con el contenedor de alineación con el lado final del artículo.
- space-evenly: esta propiedad define la posición con el mismo espaciado entre ellos pero el espaciado desde las esquinas es diferente.
- estirar: esta propiedad define la línea estirada para tomar el espacio restante del contenedor flexible. Es el valor predeterminado.
Los siguientes ejemplos ilustran la propiedad place-self de CSS :
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS place-self Property</title>
<style>
h1 {
color: green;
}
article {
background-color: black;
display: grid;
grid-auto-rows: 40px;
grid-gap: 5px;
width: 200px;
}
/* Using different values
with the place-self property */
span:nth-child(2) {
place-self: start center;
}
span:nth-child(3) {
place-self: center start;
}
article span {
background-color: orange;
color: white;
margin: 1px;
text-align: center;
}
article,
span {
padding: 6px;
border-radius: 5px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>CSS place-self Property</b>
<article class="container">
<span>HTML</span>
<span>CSS</span>
<span>Bootstrap</span>
<span>JavaScript</span>
</article>
</center>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS place-self Property</title>
<style>
h1 {
color: green;
}
article {
background-color: black;
display: grid;
grid-auto-rows: 40px;
grid-gap: 5px;
width: 200px;
}
/* Using different values
with the place-self property */
span:nth-child(2) {
place-self: self-start;
}
span:nth-child(3) {
place-self: self-end;
}
article span {
background-color: orange;
color: white;
margin: 1px;
text-align: center;
}
article,
span {
padding: 6px;
border-radius: 5px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>CSS place-self Property</b>
<article class="container">
<span>HTML</span>
<span>CSS</span>
<span>Bootstrap</span>
<span>JavaScript</span>
</article>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA