La Propiedad ALIGN-SELF
Se utiliza para anular la propiedad align-items para elementos flexibles individuales (en Flexbox) o elementos de la cuadrícula individuales (en Grid Layout).
La propiedad align-self en CSS se utiliza para anular la propiedad align-items para elementos flexibles individuales (en Flexbox) o elementos de la cuadrícula individuales (en Grid Layout). Esto te permite tener un control más granular sobre la alineación de elementos específicos a lo largo del eje transversal (el eje perpendicular al eje principal) dentro de su contenedor.
align-self se aplica directamente a los elementos hijos de un contenedor Flexbox o Grid.
Sintaxis Básica
La sintaxis básica para usar la propiedad align-self es la siguiente:
.elemento-flex-o-grid {
align-self: valor;
}
Donde .elemento-flex-o-grid es el selector del elemento al que quieres aplicar un estilo de alineación individual, y valor es la forma en la que deseas alinear ese elemento.
Valores de la Propiedad align-self
La propiedad align-self puede tomar los siguientes valores (que son muy similares a los de align-items):
1. auto
Este es el valor inicial. El elemento hereda el valor de la propiedad align-items de su contenedor padre.
Ejemplo (Flexbox):
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-flex {
display: flex;
height: 150px;
border: 1px solid #ccc;
align-items: stretch; /* Los elementos se estiran por defecto */
}
.item {
background-color: #f0f0f0;
border: 1px solid #ddd;
margin: 5px;
width: 80px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="contenedor-flex">
<div class="item">Uno</div>
<div class="item" style="align-self: auto;">Dos (hereda stretch)</div>
<div class="item">Tres</div>
</div>
</body>
</html>
En este caso, el segundo elemento también se estirará porque hereda el valor stretch de align-items del contenedor.
2. stretch
El elemento se estira para llenar todo el espacio disponible en el eje transversal de su línea (en Flexbox) o su celda (en Grid).
Ejemplo (Grid):
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 50px 100px; /* Dos filas de diferente altura */
border: 1px solid #ccc;
align-items: start; /* Los elementos se alinean al inicio por defecto */
}
.item {
background-color: #f0f0f0;
border: 1px solid #ddd;
text-align: center;
line-height: 50px; /* Aproximado */
}
</style>
</head>
<body>
<div class="contenedor-grid">
<div class="item">1</div>
<div class="item" style="align-self: stretch;">2 (se estira)</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
Aquí, el segundo elemento de la cuadrícula se estirará para ocupar toda la altura de su celda en la primera fila.
3. flex-start / start
El elemento se alinea al inicio del eje transversal de su contenedor.
Ejemplo (Flexbox):
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-flex {
display: flex;
height: 150px;
border: 1px solid #ccc;
align-items: center; /* Los elementos se centran por defecto */
}
.item {
background-color: #f0f0f0;
border: 1px solid #ddd;
margin: 5px;
width: 80px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="contenedor-flex">
<div class="item">Uno</div>
<div class="item" style="align-self: flex-start;">Dos (al inicio)</div>
<div class="item">Tres</div>
</div>
</body>
</html>
En este caso, el segundo elemento se alinea a la parte superior del contenedor, anulando el align-items: center;.
Ejemplo (Grid):
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 100px;
border: 1px solid #ccc;
align-items: end; /* Los elementos se alinean al final por defecto */
}
.item {
background-color: #f0f0f0;
border: 1px solid #ddd;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="contenedor-grid">
<div class="item">1</div>
<div class="item" style="align-self: start;">2 (al inicio)</div>
<div class="item">3</div>
</div>
</body>
</html>
Aquí, el segundo elemento de la cuadrícula se alinea a la parte superior de su celda, anulando el align-items: end;.
4. flex-end / end
El elemento se alinea al final del eje transversal de su contenedor.
Ejemplo (Flexbox):
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-flex {
display: flex;
height: 150px;
border: 1px solid #ccc;
align-items: center; /* Los elementos se centran por defecto */
}
.item {
background-color: #f0f0f0;
border: 1px solid #ddd;
margin: 5px;
width: 80px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="contenedor-flex">
<div class="item">Uno</div>
<div class="item" style="align-self: flex-end;">Dos (al final)</div>
<div class="item">Tres</div>
</div>
</body>
</html>
En este caso, el segundo elemento se alinea a la parte inferior del contenedor.
Ejemplo (Grid):
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 100px;
border: 1px solid #ccc;
align-items: start; /* Los elementos se alinean al inicio por defecto */
}
.item {
background-color: #f0f0f0;
border: 1px solid #ddd;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="contenedor-grid">
<div class="item">1</div>
<div class="item" style="align-self: end;">2 (al final)</div>
<div class="item">3</div>
</div>
</body>
</html>
Aquí, el segundo elemento de la cuadrícula se alinea a la parte inferior de su celda.
5. center
El elemento se centra a lo largo del eje transversal de su contenedor.
Ejemplo (Flexbox):
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-flex {
display: flex;
height: 150px;
border: 1px solid #ccc;
align-items: flex-start; /* Los elementos se alinean al inicio por defecto */
}
.item {
background-color: #f0f0f0;
border: 1px solid #ddd;
margin: 5px;
width: 80px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="contenedor-flex">
<div class="item">Uno</div>
<div class="item" style="align-self: center;">Dos (centrado)</div>
<div class="item">Tres</div>
</div>
</body>
</html>
En este caso, el segundo elemento se centra verticalmente dentro del contenedor.
Ejemplo (Grid):
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 100px;
border: 1px solid #ccc;
align-items: start; /* Los elementos se alinean al inicio por defecto */
}
.item {
background-color: #f0f0f0;
border: 1px solid #ddd;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="contenedor-grid">
<div class="item">1</div>
<div class="item" style="align-self: center;">2 (centrado)</div>
<div class="item">3</div>
</div>
</body>
</html>
Aquí, el segundo elemento de la cuadrícula se centra verticalmente dentro de su celda.
6. baseline
El elemento se alinea de manera que su línea base se alinee con la línea base de otros elementos en la misma línea (en Flexbox) o en la misma fila de la cuadrícula.
Ejemplo (Flexbox):
<!DOCTYPE html>
<html>
<head>
<style>
.contenedor-flex {
display: flex;
height: 150px;
border: 1px solid #ccc;
align-items: flex-start;
font-size: 20px;
}
.item {
background-color: #f0f0f0;
border: 1px solid #ddd;
margin: 5px;
padding: 10px;
width: 80px;
text-align: center;
}
.item:nth-child(2) {
font-size: 30px;
align-self: baseline;
}
</style>
</head>
<body>
<div class="contenedor-flex">
<div class="item">Uno</div>
<div class="item">Dos</div>
<div class="item">Tres</div>
</div>
</body>
</html>
El segundo elemento, con una fuente más grande, alineará su línea base con la de los otros elementos.
7. first baseline, last baseline
Estos valores especifican la alineación a la línea base de la primera o la última línea base del contenido del elemento, respectivamente. Son similares a baseline pero pueden ser más precisos en ciertos escenarios, especialmente con texto multilínea.
Cuándo usar align-self
align-self es útil cuando necesitas una alineación vertical diferente para un elemento específico dentro de un contenedor Flexbox o Grid, sin afectar la alineación de los otros elementos. Algunos casos de uso comunes incluyen:
- Alinear un botón de llamada a la acción de manera diferente al resto de los elementos en una fila.
- Centrar verticalmente un elemento específico que está rodeado por elementos alineados en la parte superior o inferior.
- Crear diseños asimétricos donde ciertos elementos destacan por su alineación.
Conclusión
La propiedad align-self te proporciona un control preciso sobre la alineación vertical de elementos individuales dentro de layouts Flexbox y Grid. Al permitirte anular la configuración general de align-items, puedes crear diseños más dinámicos y personalizados. Recuerda que align-self se aplica directamente a los elementos hijos y sus valores son consistentes con los de align-items. ¡Experimenta con diferentes valores y observa cómo afecta la disposición de tus elementos!