DevHive

Qué es Flexbox y cuándo usarlo

Flexbox es un sistema de maquetación unidimensional pensado para distribuir y alinear elementos en una fila o una columna. Lo uso cuando necesito alinear, repartir espacio y responder a diferentes anchos sin pelearme con float o con posiciones absolutas. En mi experiencia, fue el salto que me permitió “domar” el layout: pasé de ajustar píxeles a colocar bloques que se adaptan a lo que el cliente pide.

Cuándo sí:

Barras de navegación, menús, toolbars.
Cards alineadas en fila con salto a varias líneas.
Centrado vertical/horizontal sin hacks.
“Sticky footer” sencillo.

Cuándo no (o mejor usa Grid):

Tablas 2D complejas (filas y columnas con relaciones) → Grid brilla más.

Eje principal vs eje cruzado (piénsalo como “fila” y “columna”)

Eje principal: depende de flex-direction (row, row-reverse, column, column-reverse).
Eje cruzado: perpendicular al principal.
Alinear en el eje principal → justify-content.
Alinear en el eje cruzado → align-items / align-content.

En mi caso, entender este mapa mental me quitó el 80% de los dolores: si algo “no se alinea”, casi siempre estaba atacando el eje equivocado.

Empezar en 5 minutos: contenedor y elementos

display: flex y el esqueleto mínimo

<section class="flex-demo">
  <div>A</div><div>B</div><div>C</div>
</section>

.flex-demo{
  display:flex;           /* activa flex */
  border:1px solid #ddd; padding:8px; gap:8px;
}
.flex-demo > div{ background:#f5f5f5; padding:12px; border-radius:8px; }

Con solo esto, los hijos se alinean en una fila y respetan su contenido. Para cambiar a columna:

.flex-demo{ display:flex; flex-direction:column; }

gap, márgenes y “aire” entre elementos

Desde que gap funciona en Flexbox, olvidé los “márgenes mágicos”.

.flex-demo{ display:flex; gap:12px; }

Cuando empecé con Flexbox, gap me ayudó a dejar de “romper” el header en móviles: sin márgenes encadenados, los saltos de línea fueron más previsibles.

Alinear sin dolor: justify-content vs align-items

Centrado perfecto (horizontal y vertical)

<div class="center">
  <button>¡Hola!</button>
</div>

.center{
  display:flex;
  align-items:center;     /* eje cruzado */
  justify-content:center; /* eje principal */
  min-height:240px; background:#111; color:#fff; border-radius:12px;
}

Mis páginas empezaron a “respirar” cuando separé responsabilidades: justify-content para repartir, align-items para alinear.

Distribuciones comunes: menú, botones y listas

.menu{ display:flex; justify-content:space-between; align-items:center; }
.botones{ display:flex; justify-content:flex-end; gap:8px; }
.lista{ display:flex; flex-direction:column; gap:6px; }

space-between: extremos pegados, espacio en medio (ideal navbar).
flex-end en botones: CTA pegado a la derecha.
Columnas con gap: mejor lectura en listados.

Control de flujo: flex-direction, flex-wrap y flex-flow

De fila a columna según breakpoint (nav responsive)

.nav{ display:flex; gap:12px; }
@media (max-width: 640px){
  .nav{ flex-direction:column; align-items:stretch; }
}

Cuando cambié flex-direction según el breakpoint, la navegación dejó de desbordarse en móviles; el cliente notó que el menú “por fin” se veía ordenado.

Evitar desbordes con wrap + tamaños mínimos

.grid-wrap{
  display:flex; flex-wrap:wrap; gap:12px;
}
.grid-wrap > article{
  flex:1 1 240px;   /* grow | shrink | basis */
  min-width:220px;  /* evita mini-tarjetas demasiado estrechas */
}

flex-wrap: wrap permite saltar a una nueva línea.
Combina flex-basis con un min-width para mantener legibilidad.

Tamaños inteligentes: flex-grow, flex-shrink, flex-basis

Tarjetas de igual altura sin hacks

.cards{
  display:flex; gap:12px; align-items:stretch;
}
.cards > .card{
  flex:1 1 280px; display:flex; flex-direction:column;
}
.card .body{ flex:1; }

align-items: stretch + flex:1 hace que las cards crezcan igual.
Contenido flexible dentro de la card para que el pie quede alineado.

Orden y jerarquía sin tocar el HTML: order

Reordenar en móvil/escritorio con sentido

.hero{ display:flex; gap:20px; }
.hero__texto{ order:1; }
.hero__imagen{ order:2; }
@media (max-width:768px){
  .hero{ flex-direction:column; }
  .hero__texto{ order:2; }
  .hero__imagen{ order:1; }
}

Útil para enfatizar el copy en móvil sin duplicar markup.
No abuses: cambia el orden visual con criterio de accesibilidad.

Con order resolví un hero donde la foto debía ir arriba en móvil: no toqué el HTML y el cambio fue inmediato.

Recetas reales listas para pegar

Sticky footer con min-height:100vh + Flexbox

<body class="page">
  <header>Header</header>
  <main class="page__main">Contenido</main>
  <footer>Footer</footer>
</body>

.page{ min-height:100vh; display:flex; flex-direction:column; }
.page__main{ flex:1; }

Listo: el footer se queda abajo aunque haya poco contenido.

Grid de cards con wrapping (1–4 por fila)

<section class="cards-wrap">
  <article class="card">A</article> <article class="card">B</article>
  <article class="card">C</article> <article class="card">D</article>
</section>

.cards-wrap{
  display:flex; flex-wrap:wrap; gap:16px;
}
.cards-wrap .card{
  flex:1 1 calc(25% - 16px); min-width:220px;
}

Se adaptará de 4→3→2→1 según espacio disponible.

Barra de navegación adaptable

<nav class="navbar">
  <a>Logo</a>
  <ul class="navlinks">
    <li>Docs</li><li>Blog</li><li>Contacto</li>
  </ul>
  <button class="cta">Empezar</button>
</nav>

.navbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.navlinks{ display:flex; gap:12px; list-style:none; margin:0; padding:0; }
@media (max-width:700px){
  .navbar{ flex-direction:column; align-items:stretch; }
  .navlinks{ justify-content:space-between; }
  .cta{ align-self:flex-end; }
}

Flexbox vs Grid: elige la herramienta adecuada

Flexbox → unidimensional (fila o columna), ideal para alineación y distribución.
Grid → bidimensional (filas y columnas), ideal para layouts principales con estructura matricial.
Patrones híbridos: Grid para el esqueleto general, Flexbox para los componentes internos (cards, toolbars, navs).

En mis proyectos, esta combinación dio “pixel-perfection” sin perder rapidez: Grid arma, Flexbox afina.

Errores frecuentes y checklist de depuración

Errores típicos:

Usar align-items cuando el problema era de justify-content (ejes confundidos).
Pretender que align-items:center funcione sin altura disponible.
Olvidar flex-wrap y terminar con items microscópicos.
No fijar min-width o flex-basis razonables en layouts fluidos.
Reordenar con order sin considerar accesibilidad/tabindex.

Checklist (copiar/pegar en tu cabeza):

¿Activaste display:flex en el contenedor correcto?
¿Qué eje quieres controlar? → principal: justify-content, cruzado: align-*.
¿Hay espacio para centrar verticalmente? (min-height, height, padding).
¿Necesitas salto de línea? → flex-wrap: wrap + min-width/flex-basis.
¿El crecimiento es equilibrado? → flex: 1 1 Xpx.
¿El orden visual coincide con la lógica? Revisa order y accesibilidad.

Conclusión

Flexbox simplifica la alineación, el reparto de espacio y la adaptación responsive del día a día. En mi experiencia, fue la pieza que hizo que mis layouts dejaran de “pelearse” con los cambios de contenido y pantalla. Empieza con display:flex, controla ejes con cabeza, y apóyate en wrap + min-width para interfaces robustas. Con las recetas de arriba tienes una base sólida para menús, cards, footers y héroes modernos.

Flexbox explicado con ejemplos reales (y copiables)