Align-content en CSS para distribuir el espacio entre líneas de un contenedor

Hay un conocido refrán que dice “Más sabe el diablo por viejo que por diablo”. La verdad, considero esta idea bastante cierta, pues el tiempo y la práctica constante son lo que nos hacen ser expertos en algo. En mi trayectoria, muchas veces me frustré intentando que los elementos en un contenedor múltiple quedaran alineados como quería. Probaba con márgenes, padding y todo lo que se me ocurría, hasta que aprendí a manejar la propiedad align-content. 

Hoy te traigo este artículo porque me gustaría compartir contigo esta pequeña parte de lo que he aprendido en mis años como desarrollador. Por eso, vamos a ver qué es align-content en CSS, para qué sirve y cómo usarlo con ejemplos prácticos. 

¿Qué es align-content en CSS?

Como has de saber, en CSS existen diferentes propiedades con las que puedes distribuir y ajustar los elementos en un contenedor, aunque cada una tiene una función específica. Entre ellas, align-content es la que controla cómo se distribuye el espacio entre las líneas de un contenedor con elementos flexibles o de un grid. Esto quiere decir que es una propiedad muy útil cuando tienes un diseño con múltiples filas o columnas y quieres ajustar la separación entre ellas.

En otras palabras, cuando trabajas con Grid o Flexbox en tu diseño, la propiedad align-content te permite controlar cómo se distribuyen las líneas de elementos dentro del contenedor a lo largo del eje transversal, es decir, el perpendicular al eje principal. Además, esta propiedad es útil para manejar el espacio sobrante entre las filas o columnas, con lo que puedes asegurarte de que los elementos se alineen y distribuyan de manera estética y funcional dentro del contenedor.

En ese sentido, es como si fueras el capitán de una nave espacial en una película de ciencia ficción donde las filas de tripulantes son los elementos y la nave es el contenedor. Con align-content, puedes ajustar la distribución del espacio entre estas filas de tripulantes para asegurarte de que todos estén organizados y listos para la misión.

¿Para qué sirve align-content?

Vamos a ver ahora con un poco más de detalle cuáles son los principales usos de esta propiedad:

1. Controlar la separación entre filas o columnas: Ajustar esta separación es especialmente útil cuando trabajas con diseños de múltiples líneas.
2. Distribuir espacio adicional en contenedores grandes: Cuando el contenedor es más grande que las líneas de contenido, esta propiedad decide cómo se distribuye ese espacio sobrante.
3. Optimizar layouts responsivos: Te permite lograr un diseño limpio y equilibrado que pueda adaptarse a los tamaños de las pantallas en los diferentes dispositivos, por ejemplo, ordenador, móvil o tablet.

Sintaxis de align-content

Como podrás ver, la sintaxis de align-content es sencilla y fácil de implementar:

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;

Valores más comunes

En cuanto a los valores, estos son los que puedes utilizar según lo que necesites:

• flex-start: Las líneas se alinean al principio del contenedor.
• flex-end: Las líneas se alinean al final del contenedor.
• center: Todas las líneas se agrupan en el centro.
• space-between: El espacio sobrante se distribuye entre las líneas.
• space-around: Las líneas tienen espacio alrededor, pero no equitativo.
• space-evenly: El espacio entre las líneas, y entre estas y los bordes, es igual.
• stretch: Este es el valor por defecto, con el que las líneas se expanden para llenar todo el espacio del contenedor.

Ejemplos de align-content

Nuevamente, quiero enfatizar que la práctica y el tiempo son los que nos permiten ser expertos en algo. En línea con esto, voy a presentarte algunos ejemplos prácticos para que veas en acción lo útil de esta propiedad.

Alinear filas al centro

Primero, supongamos que tienes una cuadrícula con varias filas y quieres que estén centradas en el contenedor. Al hacer esto:

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    height: 300px;
    align-content: center;
    background-color: #f4f4f4;
    gap: 10px;
  }

  .grid div {
    background-color: #007BFF;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
</style>

El valor align-content: center; se encarga de centrar todas las filas dentro del contenedor.

Distribuyendo espacio con space-between

Ahora, imagina que quieres que las filas se distribuyan uniformemente con espacio entre ellas: 

<div class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-rows: repeat(3, 50px);
    height: 300px;
    align-content: space-between;
    gap: 10px;
    background-color: #eee;
  }

  .grid div {
    background-color: #28A745;
    color: white;
    text-align: center;
    padding: 10px;
  }
</style>

En este ejemplo, con el valor align-content: space-between;, las filas quedan distribuidas de forma equilibrada con espacio entre ellas.

Usar stretch para llenar el espacio

En el caso de que necesites que tus filas ocupen todo el contenedor, el valor stretch es el más adecuado:

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<style>
  .grid {
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    align-content: stretch;
    background-color: #ddd;
  }

  .grid div {
    flex: 1 1 100%;
    background-color: #FFC107;
    margin: 5px;
    text-align: center;
  }
</style>

Aquí, align-content: stretch; asegura que las filas ocupen toda la altura disponible del contenedor.

Diferencias align-content y otras propiedades similares

La verdad, es muy fácil confundir align-content con otras propiedades como align-items o justify-content, ya sea por la similitud de sus nombres o por sus usos. Para evitar confusiones, te voy a explicar muy brevemente cuál es la principal diferencia entre cada una de estas propiedades.

Propiedades	Funciones
align-content	Ajusta el espacio entre las líneas de un contenedor.
align-items	Alinea los elementos dentro de cada línea en el eje cruzado.
justify-content	Alinea los elementos a lo largo del eje principal.

Como puedes ver, podemos emplear align-content cuando tenemos múltiples líneas o filas de elementos en el contenedor y necesitamos ajustar la distribución del espacio entre estas líneas. En cambio, utilizamos align-items para alinear los elementos hijos a lo largo del eje transversal dentro de una sola línea o fila del contenedor. Esto nos permite ajustar la posición de los elementos individuales dentro de su contenedor.

Consejos para usar align-content como un experto

Desde mi experiencia, quisiera darte unos cuantos consejos que con los que puedes aprovechar mejor la funcionalidad de esta propiedad:

1. Conoce tu contenedor: Puedes utilizar esta propiedad cuando tienes múltiples filas o columnas de elementos dentro de un contenedor. Esto puede ser especialmente útil en aquellos contenedores de cuadrícula y en contenedores flexibles que envuelven elementos.
2. Combínalo con otras propiedades: También puedes utilizar otras propiedades como align-items y justify-content para lograr layouts más precisos.
3. Conoce sus valores: Te recomiendo empezar a familiarizarte con los valores comunes que mencionamos anteriormente, ya que cada uno de ellos te permitirá distribuir el espacio sobrante de diferentes maneras.
4. Adáptalo a diseños responsivos: Lo ideal es que tus diseños funcionen bien en los diferentes tipos de dispositivos, sin importar el tamaño de la pantalla. Por eso, te recomiendo utilizar valores como space-evenly o space-around.

Aquí finaliza mi parte. Ahora es tu momento de empezar a practicar y ver cómo align-content puede favorecer el diseño de tus proyectos web. Lo más importante es que ya sabes que esta propiedad te da el control necesario para alinear filas o columnas de una forma eficiente y visualmente atractiva.

Si aprender a usar align-content te puede abrir las puertas a nuevas posibilidades al momento de crear tus sitios web, imagina todo lo que podrías lograr dominando todo CSS y las tecnologías web más demandadas. En nuestro Bootcamp en Desarrollo Web, queremos enseñarte a crear diseños increíbles y prepararte para que puedas iniciar una carrera en un sector lleno de oportunidades laborales, grandes salarios y mucha innovación.

¡Inscríbete ahora y transforma tu vida!