Propiedad CSS align-items
La propiedad CSS align-items especifica la alineación predeterminada para los elementos flex. Es similar a la propiedad justify-content, pero alinea los elementos a lo largo del eje transversal (normalmente vertical, según flex-direction).
Nota: Esta propiedad solo se aplica a contenedores flex y grid.
Esta propiedad es una de las propiedades CSS3.
La propiedad align-items acepta los siguientes valores:
- stretch
- flex-start
- center
- flex-end
- baseline
| Valor inicial | stretch |
|---|---|
| Se aplica a | Contenedores flex y grid. |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.alignItems = "center"; |
Sintaxis
Sintaxis de la propiedad CSS align-items
align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;Ejemplo de la propiedad align-items:
Ejemplo de la propiedad CSS align-items con el valor stretch
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: stretch;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: stretch; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Resultado
En el siguiente ejemplo, los elementos se posicionan en el centro del contenedor.
Ejemplo de la propiedad align-items con el valor "center":
Ejemplo de la propiedad CSS align-items con el valor center
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: center;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: center; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>En el siguiente ejemplo, los elementos se colocan al principio.
Ejemplo de la propiedad align-items con el valor "flex-start":
Ejemplo de la propiedad CSS align-items con el valor flex-start
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: flex-start;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: flex-start; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Aquí aplicamos el valor "flex-end", que coloca los elementos al final del contenedor.
Ejemplo de la propiedad align-items con el valor "flex-end":
Ejemplo de la propiedad CSS align-items con el valor flex-end
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: flex-end;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: flex-end; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Veamos nuestro último ejemplo con el valor "baseline", que coloca los elementos en la línea base del contenedor.
Ejemplo de la propiedad align-items con el valor "baseline":
Ejemplo de la propiedad CSS align-items con el valor baseline
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
width: 220px;
height: 300px;
padding: 0;
border: 1px solid #000;
display: flex;
align-items: baseline;
}
#example li {
flex: 1;
list-style: none;
}
</style>
</head>
<body>
<h2>Align-items: baseline; example</h2>
<ul id="example">
<li style="background-color:#8ebf42;">Green</li>
<li style="background-color:#1c87c9;">Blue</li>
<li style="background-color:#ccc;">Gray</li>
</ul>
</body>
</html>Resultado
Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| stretch | Hace que los elementos se estiren para ajustarse al contenedor. Este es el valor predeterminado de esta propiedad. | 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 base del contenedor. | Probarlo » |
| initial | Hace que la propiedad use su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad del elemento padre. |
Practice
¿Cuáles son los valores posibles de la propiedad 'align-items' en CSS?