CSS place-self Propiedad

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:
lugar-auto-ex1

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:
place-self-ex2

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *