CSS Flexbox: maquetar columnas verticales contiguas, con contenido centrado verticalmente

En este taller CSS vamos a ver cómo maquetar columnas contiguas con contenido centrado verticalmente. Para ello vamos a utilizar Flexbox.

Flexbox (Flexible Box Layout), es un modelo de diseño CSS que permite crear diseños complejos y responsivos de manera más eficiente que los métodos tradicionales. Fue introducido para solucionar muchos de los problemas de diseño web que eran difíciles de resolver con flotadores (floats) y posicionamiento.

Aquí te explico los conceptos fundamentales de Flexbox:

Conceptos básicos de Flexbox

1. Contenedor Flex (Flex Container): Es el elemento padre que contiene los elementos flex. Se define aplicando display: flex o display: inline-flex a un elemento.
2. Elementos Flex (Flex Items): Son los hijos directos del contenedor flex.
3. Ejes: Flexbox trabaja con dos ejes:
   • Eje principal (Main Axis): Va en la dirección definida por flex-direction (horizontal por defecto)
   • Eje transversal (Cross Axis): Perpendicular al eje principal

Propiedades principales del contenedor flex

• display: flex: Convierte un elemento en un contenedor flex.
• flex-direction: Define la dirección del eje principal:
  • row (valor por defecto): de izquierda a derecha
  • row-reverse: de derecha a izquierda
  • column: de arriba hacia abajo
  • column-reverse: de abajo hacia arriba
• justify-content: Alinea elementos a lo largo del eje principal:
  • flex-start, flex-end, center, space-between, space-around, space-evenly
• align-items: Alinea elementos a lo largo del eje transversal:
  • flex-start, flex-end, center, stretch, baseline
• flex-wrap: Controla si los elementos pueden saltar a una nueva línea:
  • nowrap (valor por defecto): sin saltos de línea
  • wrap: permite saltos de línea
  • wrap-reverse: permite saltos de línea en dirección inversa
• gap: Establece espacios entre elementos flex

Propiedades para los elementos flex

• flex: Abreviatura para flex-grow, flex-shrink y flex-basis:
  • flex: 1 = flex: 1 1 0%
• flex-grow: Determina cuánto puede crecer un elemento (número positivo)
• flex-shrink: Determina cuánto puede encogerse un elemento (número positivo)
• flex-basis: Define el tamaño base antes de distribuir el espacio
• align-self: Permite sobrescribir el alineamiento establecido por align-items

Ventajas de Flexbox

1. Alineamiento simplificado: Centrar vertical y horizontalmente es mucho más fácil
2. Orden flexible: Puedes reordenar elementos sin cambiar el HTML
3. Distribución de espacio: Facilita la distribución proporcional del espacio
4. Diseño responsive: Se adapta naturalmente a diferentes tamaños de pantalla

Flexbox es especialmente útil para:

• Barras de navegación
• Formularios
• Tarjetas o elementos de igual altura
• Centrado vertical y horizontal
• Diseños que necesitan adaptarse a diferentes tamaños de pantalla

Es una herramienta fundamental en el desarrollo web moderno y trabaja bien en combinación con CSS Grid, que está más orientado a diseños bidimensionales (filas y columnas simultáneamente).

Vamos ahora con la práctica de este post.

Cómo maquetar varias columnas contiguas con contenido centrado verticalmente.

Primero la CSS:

<style>
/* Estilos para el contenedor principal */
.container {
display: flex;
flex-direction: row; /* Columnas dispuestas horizontalmente (una al lado de otra) */
width: 100%;
max-width: 1200px;
margin: 0auto;
gap: 20px; /* Espacio entre columnas */
}
/* Estilos para las columnas */
.column {
flex: 1; /* Cada columna ocupa el mismo espacio */
padding: 20px;
box-sizing: border-box;
display: flex;
align-items: center; /* Centra el contenido verticalmente */
min-height: 200px; /* Altura mínima para que se note el centrado vertical */
border: 1pxsolid#ddd; /* Borde para visualizar las columnas */
border-radius: 4px;
}
/* Estilos para el contenido dentro de las columnas */
.column-content {
width: 100%;
}
/* Responsive: para dispositivos móviles */
@media screen and (max-width: 768px) {
.container {
flex-direction: column; /* Cambia a vertical en pantallas pequeñas */
}
.column {
margin-bottom: 15px; /* Espacio entre columnas cuando están apiladas */
}
}
/* Clases útiles para diferentes distribuciones de columnas */
.container.two-columns .column {
flex-basis: calc(50% - 10px); /* 2 columnas de igual ancho con espacio entre ellas */
}
.container.three-columns .column {
flex-basis: calc(33.333% - 14px); /* 3 columnas de igual ancho con espacio entre ellas */
}
.container.four-columns .column {
flex-basis: calc(25% - 15px); /* 4 columnas de igual ancho con espacio entre ellas */
}
/* Distribución con columnas de ancho fijo y variable */
.column.fixed {
flex: 00200px; /* Ancho fijo de 200px */
}
.column.flexible {
flex: 1; /* Ocupa el espacio restante */
}
/* Opcional: diferentes estilos para columnas alternadas */
.column:nth-child(odd) {
background-color: #f9f9f9;
}
.column:nth-child(even) {
background-color: #f1f1f1;
}
</style>

Y ahora el código HTML:

<div class="container three-columns">
<divclass="column">
<divclass="column-content">
<h2>Columna 1</h2>
<p>Este contenido está centrado verticalmente.</p>
</div>
</div>
<divclass="column">
<divclass="column-content">
<h2>Columna 2</h2>
<p>Este contenido también está centrado verticalmente.</p>
</div>
</div>
<divclass="column">
<divclass="column-content">
<h2>Columna 3</h2>
<p>Y este contenido igualmente está centrado verticalmente.</p>
</div>
</div>
</div>