CSS Align-content
La propiedad align-content es similar a la propiedad align-items, pero se utiliza para alinear elementos en el eje transversal de un contenedor flex. Es decir, es utilizada para alinear varias líneas de elementos flex en un contenedor flex.
Valores
Los valores disponibles para align-content son similares a los de align-items, como:
flex-start: Alinea los elementos en la parte superior del contenedor.
flex-end: Alinea los elementos en la parte inferior del contenedor.
center: Alinea los elementos al centro del contenedor.
space-between: Distribuye los elementos de manera equitativa entre la parte superior y la parte inferior del contenedor, dejando espacio entre ellos.
space-around: Distribuye los elementos de manera equitativa en todo el contenedor, dejando espacio entre ellos y alrededor de ellos.
stretch: Estira los elementos para llenar todo el alto del contenedor.
Es importante mencionar que align-content solo tiene efecto cuando el contenedor tiene múltiples líneas de elementos flex, es decir, cuando el atributo flex-wrap está habilitado.
Ejemplo de uso
Aquí te presento una lista de ejemplos de cómo se verían los diferentes valores de la propiedad align-content en un contenedor flex utilizando HTML:
align-content: flex-start;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en flex-start */
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se establece el contenedor como flex y se establece el align-content en flex-start, esto hace que los elementos se alineen en la parte superior del contenedor.
align-content: flex-end;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en flex-end */
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se establece el contenedor como flex y se establece el align-content en flex-end, esto hace que los elementos se alineen en la parte inferior del contenedor.
align-content: center;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en center */
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se establece el contenedor como flex y se establece el align-content en center, esto hace que las líneas de elementos flex dentro del contenedor se alineen al centro del mismo.
Es importante tener en cuenta que el elemento contenedor debe tener múltiples líneas de elementos flex para que el efecto de esta propiedad sea visible, es decir que el atributo flex-wrap debe estar habilitado.
align-content: space-between;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en space-between */
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se establece el contenedor como flex y se establece el align-content en space-between, esto hace que los elementos se distribuyan de manera equitativa entre la parte superior y la parte inferior del contenedor, dejando espacio entre ellos.
align-content: space-around;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en space-around */
.container {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se establece el contenedor como flex y se establece el align-content en space-around, esto hace que los elementos se distribuyan de manera equitativa en todo el contenedor, dejando espacio entre ellos y alrededor de ellos.
align-content: stretch;
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecemos el contenedor como flex y establecemos el align-content en stretch */
.container {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
<div class="item5">Item 5</div>
</div>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se establece el contenedor como flex y se establece el align-content en stretch, esto hace que los elementos se estiren para llenar todo el alto del contenedor.
Con estos ejemplos puedes ver cómo cada uno de estos valores afecta el alineamiento de varias líneas de elementos flex en un contenedor flex y cómo puedes utilizar esta propiedad para adaptar el diseño de tu página web y lograr el alineamiento deseado en el eje transversal del contenedor flex.
Es importante tener en cuenta que la propiedad align-content solo tiene efecto cuando el contenedor tiene múltiples líneas de elementos flex, es decir, cuando el atributo flex-wrap está habilitado.