En este artículo, aprenderemos cómo configurar la propiedad align-self a su valor predeterminado. La propiedad align-self se utiliza para especificar la alineación del elemento elegido dentro del elemento principal.
Enfoque: el valor automático en la propiedad align-self se usa para establecer el valor predeterminado en CSS. Este valor hace que esta propiedad herede directamente su comportamiento del elemento padre. En el caso de que esto no sea posible, el elemento se estira como el uso del atributo de estiramiento .
Sintaxis:
align-self: auto
El siguiente ejemplo demuestra el enfoque anterior.
Ejemplo 1: en este ejemplo, el contenedor principal tiene elementos de alineación establecidos en el centro.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
width: 500px;
height: 300px;
border: 5px solid gray;
display: flex;
align-items: center;
}
#parent>div {
padding: 10px;
margin: 10px;
}
#box1 {
border: 2px solid black;
}
#box2 {
align-self: auto;
border: 2px dashed black;
}
#box3 {
align-self: baseline;
border: 2px dashed black;
}
</style>
</head>
<body>
<div id="parent">
<div style="background-color:pink;" id="box1">
Child One with no align-self specified
</div>
<div style="background-color:yellow;" id="box2">
Child Two with align-self set to auto
</div>
<div style="background-color:orange;" id="box3">
Child Three with align-self set to baseline
</div>
</div>
</body>
</html>
Salida: Podemos ver que los primeros dos elementos heredan la propiedad del padre.
Ejemplo 2: en este ejemplo, el contenedor principal no tiene especificada la propiedad align-items.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
width: 500px;
height: 300px;
border: 5px solid gray;
display: flex;
}
#parent>div {
padding: 10px;
margin: 10px;
}
#box1 {
border: 2px solid black;
}
#box2 {
align-self: auto;
border: 2px dashed black;
}
#box3 {
align-self: center;
border: 2px dashed black;
}
</style>
</head>
<body>
<div id="parent">
<div style="background-color:pink;" id="box1">
Child One with no align-self specified
</div>
<div style="background-color:yellow;" id="box2">
Child Two with align-self set to auto
</div>
<div style="background-color:orange;" id="box3">
Child Three with align-self set to center
</div>
</div>
</body>
</html>
Salida: podemos ver que los primeros dos elementos recurren a estirarse ya que el padre no tiene elementos de alineación especificados.
Publicación traducida automáticamente
Artículo escrito por KrishnaKripa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA