CSS Align-self
La propiedad CSS align-self es utilizada para alinear individualmente un elemento dentro de un contenedor flex (elementos con la propiedad display: flex establecida) en el eje transversal, que es el eje vertical (arriba-abajo) por defecto.
Esta propiedad se aplica a elementos hijos individuales y nos permite sobrescribir el valor establecido en la propiedad align-items del contenedor padre.
Valores
Los valores posibles son los mismos que align-items:
flex-start: el elemento se alinea al comienzo del contenedor, es decir, arriba.
flex-end: el elemento se alinea al final del contenedor, es decir, abajo.
center: el elemento se alinea en el centro del contenedor.
baseline: el elemento se alinea según la línea base del texto.
stretch: el elemento se estira para llenar el contenedor.
Ejemplo de uso
.container {
display: flex;
align-items: center;
}
.item1 {
align-self: flex-start;
}
.item2 {
align-self: flex-end;
}
Lenguaje del código: CSS (css)En este ejemplo, el contenedor tiene la propiedad align-items establecida en “center” y los elementos con clase “item1” y “item2” tienen la propiedad align-self establecida en “flex-start” y “flex-end” respectivamente.
Por lo tanto, el elemento con clase “item1” se alineará en la parte superior del contenedor y el elemento con clase “item2” se alineará en la parte inferior del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
En resumen, align-self es una propiedad muy útil para alinear individualmente los elementos hijos dentro de un contenedor flex, permitiendo un control más granular sobre la distribución de los elementos hijos dentro del contenedor padre.
Ejemplos:
Aquí te presento una lista de ejemplos de cómo se verían los diferentes valores de la propiedad align-self en un contenedor flex utilizando HTML:
align-self: flex-start;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-items en center */
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1" style="align-self: flex-start;">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el elemento con la clase “item1” tiene una propiedad align-self establecida en “flex-start”, lo que hace que este elemento sea alineado en la parte superior del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
align-self: flex-end;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-items en center */
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1" style="align-self: flex-end;">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el elemento con la clase “item1” tiene una propiedad align-self establecida en “flex-end”, lo que hace que este elemento sea alineado en la parte inferior del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
align-self: center;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-items en center */
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1" style="align-self: center;">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el elemento con la clase “item1” tiene una propiedad align-self establecida en “center”, lo que hace que este elemento sea alineado en el centro del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
Esto es útil cuando quieres tener un elemento específico alineado de forma diferente a los demás elementos hijos del contenedor flex.
align-self: baseline;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-items en center */
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1" style="align-self: baseline;">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el elemento con la clase “item1” tiene una propiedad align-self establecida en “baseline”, lo que hace que este elemento sea alineado con la línea de base del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
align-self: stretch;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-items en center */
.container {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1" style="align-self: stretch;">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, el elemento con la clase “item1” tiene una propiedad align-self establecida en “stretch”, lo que hace que este elemento se estire para llenar todo el alto del contenedor, independientemente de cómo estén alineados los demás elementos hijos.
Con estos ejemplos puedes ver cómo cada uno de estos valores afecta el alineamiento de un elemento dentro de un contenedor flex y cómo puedes utilizar esta propiedad para adaptar el diseño de tu página web.