CSS Flexbox: Alineación y distribución de elementos

CSS Flexbox revolucionó la forma en que creamos layouts en la web. Antes de su llegada, los desarrolladores frontend dependían de floats y posicionamiento absoluto para alinear elementos, lo que resultaba en código frágil y difícil de mantener. Flexbox cambió el juego completamente.

En esta guía, exploraremos en profundidad cómo funciona Flexbox, cuándo usarlo y cómo resolver problemas comunes de alineación y distribución de elementos en tus proyectos.

¿Qué es Flexbox?

Flexbox, o Flexible Box Layout, es un modelo de layout unidimensional que te permite distribuir elementos a lo largo de un eje (horizontal o vertical). A diferencia de CSS Grid, que es bidimensional, Flexbox se enfoca en una sola dirección.

El modelo de Flexbox se basa en dos conceptos clave:

• Contenedor flex: El elemento padre con display: flex.
• Items flex: Los elementos hijos directos del contenedor.

.container {
  display: flex;
}

Cuando aplicas display: flex a un contenedor, todos sus hijos se convierten en items flex y se comportan de manera predecible, respetando las propiedades del contenedor.

Propiedades del contenedor flex

El contenedor flex controla cómo se distribuyen y alinean los items en su interior. Estas son las propiedades más importantes:

flex-direction

Define la dirección principal en la que fluyen los items:

.container {
  display: flex;
  flex-direction: row; /* por defecto: izquierda a derecha */
  /* flex-direction: column; */ /* de arriba a abajo */
  /* flex-direction: row-reverse; */ /* derecha a izquierda */
  /* flex-direction: column-reverse; */ /* abajo a arriba */
}

justify-content

Alinea los items a lo largo del eje principal (horizontal si flex-direction: row):

.container {
  display: flex;
  justify-content: flex-start; /* por defecto: al inicio */
  /* justify-content: center; */ /* centrados */
  /* justify-content: space-between; */ /* espacio entre items */
  /* justify-content: space-around; */ /* espacio alrededor */
  /* justify-content: space-evenly; */ /* espacio uniforme */
}

align-items

Alinea los items a lo largo del eje transversal (vertical si flex-direction: row):

.container {
  display: flex;
  align-items: stretch; /* por defecto: estira hasta llenar */
  /* align-items: center; */ /* verticalmente centrados */
  /* align-items: flex-start; */ /* al inicio */
  /* align-items: flex-end; */ /* al final */
  /* align-items: baseline; */ /* alineados al texto base */
}

gap

Especifica el espacio entre los items (sin afectar los márgenes externos):

.container {
  display: flex;
  gap: 16px; /* espacio entre todos los items */
  /* row-gap: 16px; */ /* espacio entre filas */
  /* column-gap: 24px; */ /* espacio entre columnas */
}

flex-wrap

Controla si los items se ajustan a múltiples líneas:

.container {
  display: flex;
  flex-wrap: nowrap; /* por defecto: una sola línea */
  /* flex-wrap: wrap; */ /* múltiples líneas, abajo */
  /* flex-wrap: wrap-reverse; */ /* múltiples líneas, arriba */
}

Propiedades de los items flex

Los items flex también tienen propiedades propias que controlan su comportamiento individual:

flex-grow

Define cuánto crece un item respecto a los demás cuando hay espacio disponible:

.item {
  flex-grow: 0; /* por defecto: no crece */
}

.item.primary {
  flex-grow: 1; /* crece para ocupar espacio disponible */
}

.item.double {
  flex-grow: 2; /* crece el doble que los demás */
}

flex-shrink

Define cuánto se reduce un item cuando no hay espacio suficiente:

.item {
  flex-shrink: 1; /* por defecto: se reduce proporcionalmente */
}

.item.important {
  flex-shrink: 0; /* no se reduce, mantiene su tamaño */
}

flex-basis

Define el tamaño base del item antes de que se distribuya el espacio:

.item {
  flex-basis: auto; /* por defecto: basado en el contenido */
  /* flex-basis: 200px; */ /* ancho/alto base específico */
  /* flex-basis: 50%; */ /* porcentaje del contenedor */
}

flex (abreviada)

Combina flex-grow, flex-shrink y flex-basis:

.item {
  flex: 1; /* equivalente a: flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
  /* flex: 1 200px; */ /* grow: 1, shrink: 1, basis: 200px */
}

Casos de uso: Flexbox vs Grid

Saber cuándo usar Flexbox es tan importante como saber cómo usarlo. Aquí te muestro cuándo elegir cada uno:

Usa Flexbox cuando:

• Necesites alinear elementos en una única dirección (fila o columna).
• Quieras distribuir espacio entre items de manera flexible.
• Necesites componentes responsivos que se adapten a múltiples líneas.
• Quieras navbars, barras de herramientas, o listas alineadas.

Usa Grid cuando:

• Necesites crear un layout bidimensional (filas y columnas simultáneamente).
• Tengas una estructura de página clara (header, sidebar, main, footer).
• Necesites controlar tanto la posición horizontal como vertical de múltiples elementos.

En muchos casos, usarás ambos: Grid para la estructura general de la página y Flexbox para componentes internos.

Ejemplos prácticos

Navbar centrada con espaciado

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #f5f5f5;
}

.navbar-logo {
  font-weight: bold;
}

.navbar-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.navbar-cta {
  flex-shrink: 0;
}

<nav class="navbar">
  <div class="navbar-logo">Mi Sitio</div>
  <ul class="navbar-links">
    <li><a href="/">Inicio</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
  <button class="navbar-cta">Acceder</button>
</nav>

Tarjeta con contenido flexible

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px;
  gap: 12px;
}

.card-title {
  font-weight: bold;
  font-size: 18px;
}

.card-description {
  flex: 1;
  color: #666;
  font-size: 14px;
}

.card-footer {
  display: flex;
  gap: 8px;
}

Layout responsivo con wrap

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.gallery-item {
  flex: 1 1 200px; /* grow, shrink, basis */
  min-width: 0;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .gallery-item {
    flex: 1 1 150px;
  }
}

Errores comunes y cómo evitarlos

Items no se encogen correctamente

Si tus items no se adaptan al espacio disponible, verifica min-width o min-height. Los items flex respetan el tamaño mínimo de su contenido:

.item {
  flex: 1;
  min-width: 0; /* permite que se encoja debajo del contenido */
}

Gap no funciona en navegadores antiguos

Si necesitas soportar navegadores sin soporte para gap, usa márgenes:

.container {
  display: flex;
  gap: 16px;
}

.item:not(:last-child) {
  margin-right: 16px; /* fallback para navegadores antiguos */
}

Alineación vertical no funciona

Asegúrate de que el contenedor tiene altura definida:

.container {
  display: flex;
  align-items: center;
  height: 400px; /* o min-height: 400px */
}

Herramientas para dominar Flexbox

• Flex Froggy: Un juego interactivo que te enseña Flexbox de manera divertida.
• DevTools del navegador: Inspecciona el modelo de caja flex para entender cómo se distribuye el espacio.
• MDN Web Docs: La documentación oficial de Flexbox es exhaustiva y confiable.

##### Conclusión final

Flexbox es una herramienta indispensable en el kit de cualquier desarrollador frontend. Su combinación de simpleza y potencia la hace ideal para layouts unidimensionales, componentes responsivos y alineación de elementos.

La clave está en entender los dos conceptos fundamentales: el contenedor controla la distribución global y los items controlan su comportamiento individual. Una vez que internalizas este modelo, crear layouts flexibles, mantenibles y responsivos se convierte en segunda naturaleza.

Practica con diferentes combinaciones de propiedades, experimenta con ejemplos reales y no dudes en usar las DevTools para inspeccionar y entender cómo funciona el modelo flex en cada caso. Con el tiempo, Flexbox será tan natural como escribir HTML.