La Propiedad ALIGN-CONTENT

Se utiliza para controlar la alineación de las líneas de flexión (en Flexbox) o las pistas de la cuadrícula (en Grid Layout) dentro de su contenedor a lo largo del eje transversal.

La propiedad align-content en CSS se utiliza para controlar la alineación de las líneas de flexión (en Flexbox) o las pistas de la cuadrícula (en Grid Layout) dentro de su contenedor a lo largo del eje transversal (el eje perpendicular al eje principal).

Es importante destacar que align-content solo tiene efecto cuando hay múltiples líneas de elementos flexibles (es decir, cuando se usa flex-wrap: wrap en Flexbox) o cuando hay múltiples filas o columnas en un contenedor de cuadrícula. Si solo hay una línea de elementos flexibles o una sola fila/columna en la cuadrícula, align-content no tendrá ningún efecto visible.

Sintaxis Básica

La sintaxis básica para usar la propiedad align-content es la siguiente:

CSS
 
.contenedor-flex {
  display: flex;
  flex-wrap: wrap; /* Necesario para tener múltiples líneas */
  align-content: valor;
}

.contenedor-grid {
  display: grid;
  /* Definir múltiples filas o columnas */
  align-content: valor;
}

Donde valor es la forma en la que deseas alinear las líneas o pistas.

Valores de la Propiedad align-content

A continuación, exploraremos los diferentes valores que puede tomar la propiedad align-content:

1. stretch

Este es el valor predeterminado. Las líneas de flexión o las pistas de la cuadrícula se estiran para ocupar todo el espacio disponible en el eje transversal.

Ejemplo (Flexbox):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-flex {
    display: flex;
    flex-wrap: wrap;
    height: 200px; /* Altura fija para ver el efecto */
    border: 1px solid #ccc;
    align-content: stretch;
  }

  .item {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin: 5px;
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
  }
</style>
</head>
<body>

  <div class="contenedor-flex">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>

</body>
</html>

En este ejemplo, las dos líneas de elementos flexibles se estirarán para llenar la altura de 200px del contenedor.

Ejemplo (Grid):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-grid {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: auto auto; /* Dos filas */
    height: 200px;
    border: 1px solid #ccc;
    align-content: stretch;
  }

  .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">2</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í, las dos filas de la cuadrícula se estirarán para llenar la altura de 200px.

2. flex-start / start

Las líneas de flexión o las pistas de la cuadrícula se agrupan al inicio del eje transversal.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-content: flex-start; }

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-content: start; }

3. flex-end / end

Las líneas de flexión o las pistas de la cuadrícula se agrupan al final del eje transversal.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-content: flex-end; }

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-content: end; }

4. center

Las líneas de flexión o las pistas de la cuadrícula se agrupan y se centran en el medio del eje transversal.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-content: center; }

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-content: center; }

5. space-between

El espacio disponible se distribuye uniformemente entre las líneas de flexión o las pistas de la cuadrícula. La primera línea/pista se coloca al inicio del contenedor y la última al final.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-content: space-between; }

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-content: space-between; }

6. space-around

El espacio disponible se distribuye uniformemente alrededor de cada línea de flexión o pista de la cuadrícula. Esto significa que habrá un espacio igual antes de la primera línea/pista y después de la última, así como entre cada línea/pista.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-content: space-around; }

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-content: space-around; }

7. space-evenly

El espacio disponible se distribuye uniformemente entre y alrededor de cada línea de flexión o pista de la cuadrícula. Esto asegura que el espacio antes de la primera línea/pista, entre cada línea/pista y después de la última sea el mismo.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-content: space-evenly; }

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-content: space-evenly; }

8. normal

Este es el valor inicial. En Flexbox, se comporta como stretch. En Grid Layout, se comporta como start para contenedores de nivel de bloque.

Ejemplo (Flexbox):

CSS
 
.contenedor-flex { align-content: normal; } /* Equivalente a stretch */

Ejemplo (Grid):

CSS
 
.contenedor-grid { align-content: normal; } /* Equivalente a start */

9. baseline

Las líneas de flexión se alinean de manera que las líneas base de los elementos dentro de cada línea estén alineadas. Este valor es menos común para align-content y se utiliza más con align-items o align-self para alinear elementos individuales dentro de una línea.

Ejemplo (Flexbox):

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor-flex {
    display: flex;
    flex-wrap: wrap;
    height: 150px;
    border: 1px solid #ccc;
    align-content: baseline;
    font-size: 20px; /* Para hacer la línea base más visible */
  }

  .item {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    margin: 5px;
    padding: 10px;
    width: 100px;
    text-align: center;
  }

  .item:nth-child(2) {
    font-size: 30px; /* Diferente tamaño de fuente para variar la línea base */
  }
</style>
</head>
<body>

  <div class="contenedor-flex">
    <div class="item">Uno</div>
    <div class="item">Dos</div>
    <div class="item">Tres</div>
    <div class="item">Cuatro</div>
  </div>

</body>
</html>

10. first baseline, last baseline

Estos valores especifican la alineación de acuerdo con la línea base de la primera o la última línea base de los elementos dentro de cada línea de flexión o pista de la cuadrícula.

Diferencia entre align-content y align-items (en Flexbox) / align-tracks (en Grid)

Es crucial entender la diferencia entre align-content y align-items (en Flexbox) o align-tracks (en Grid):

  • align-content: Alinea las líneas de elementos flexibles o las pistas de la cuadrícula dentro del contenedor. Solo tiene efecto cuando hay múltiples líneas o pistas.
  • align-items (Flexbox): Alinea los elementos individuales dentro de cada línea de flexión a lo largo del eje transversal. Tiene efecto incluso si hay una sola línea.
  • align-tracks (Grid): Es un sinónimo de align-items en el contexto de Grid Layout (aunque align-items es más comúnmente utilizado).

Ejemplos Prácticos

Aquí tienes un ejemplo que muestra la diferencia entre align-content y align-items en Flexbox:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .contenedor {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    height: 200px;
    border: 1px solid black;
    margin-bottom: 20px;
  }

  .item {
    width: 80px;
    height: 40px;
    background-color: lightblue;
    border: 1px solid blue;
    margin: 5px;
    text-align: center;
    line-height: 40px;
  }

  .align-content-ejemplo { align-content: center; }
  .align-items-ejemplo { align-items: center; }
</style>
</head>
<body>

  <h2>Ejemplo con align-content: center</h2>
  <div class="contenedor align-content-ejemplo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

  <h2>Ejemplo con align-items: center</h2>
  <div class="contenedor align-items-ejemplo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>

</body>
</html>

En el primer ejemplo (con align-content: center), las dos líneas de elementos se centran verticalmente dentro del contenedor. En el segundo ejemplo (con align-items: center), cada elemento individual dentro de su respectiva línea se centra verticalmente dentro de su propio espacio.

Conclusión

La propiedad align-content es una herramienta poderosa para controlar la distribución del espacio entre las líneas de flexión o las pistas de la cuadrícula en el eje transversal. Comprender cómo usar sus diferentes valores te permitirá crear diseños más complejos y flexibles, especialmente cuando trabajas con múltiples líneas o pistas en Flexbox y Grid Layout. Recuerda que su efecto solo es visible cuando hay más de una línea o pista en el contenedor.