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