Propiedad CSS align-self
La propiedad CSS align-self alinea los elementos seleccionados dentro de la línea flex actual y anula los valores de align-items.
La propiedad align-self es una de las propiedades de CSS3.
La propiedad align-self acepta los mismos valores que la propiedad align-items:
- auto
- stretch
- flex-start
- flex-end
- center
- baseline
INFO
Esta propiedad se ignorará si el margen vertical de un elemento flex está configurado en "auto". La propiedad align-self no se aplica a celdas de tabla ni a cajas de nivel de bloque.
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos flex, elementos de cuadrícula y cajas posicionadas absolutamente. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.alignSelf = "auto"; |
Sintaxis
Sintaxis de la propiedad CSS align-self
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;Ejemplo de la propiedad align-self:
Ejemplo de la propiedad CSS align-self con el valor flex-start
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
section {
display: flex;
align-items: center;
height: 120px;
padding: 10px;
background: #99caff;
}
div {
height: 60px;
background: #1c87c9;
margin: 5px;
}
div:nth-child(1) {
align-self: flex-start;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Align-self property example</h2>
<p>Here the align-self for the first box is set to "flex-start".</p>
<section>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
</section>
</body>
</html>Resultado
A continuación se muestra un ejemplo donde se utilizan tres cajas y la segunda está especificada con el valor "flex-end".
Ejemplo de la propiedad align-self con el valor "flex-end":
Ejemplo de la propiedad CSS align-self con el valor flex-end
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
section {
display: flex;
align-items: center;
height: 120px;
padding: 10px;
background: #99caff;
}
div {
height: 60px;
background: #1c87c9;
margin: 5px;
}
div:nth-child(2) {
align-self: flex-end;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>Align-self property example</h2>
<p>Here the align-self for the second box is set to "flex-end".</p>
<section>
<div>Box #1</div>
<div>Box #2</div>
<div>Box #3</div>
</section>
</body>
</html>Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| auto | El elemento hereda la propiedad align-items de su contenedor padre. Este es el valor predeterminado. | Probarlo » |
| stretch | Estira los elementos para que se ajusten al contenedor. | Probarlo » |
| center | Los elementos se colocan en el centro del contenedor. | Probarlo » |
| flex-start | Los elementos se colocan al principio del contenedor. | Probarlo » |
| flex-end | Los elementos se colocan al final del contenedor. | Probarlo » |
| baseline | Los elementos se posicionan en la línea de base del contenedor. | Probarlo » |
| initial | Hace que la propiedad utilice su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad 'align-self' en CSS?