wandres.dev
FLEXBOX EN LA PRÁCTICA · Alineación, orden y patrones

Los cuatro patrones canónicos de flexbox

Barra de navegación, media object, sticky footer y sidebar que colapsa sin media queries: el código completo de los cuatro layouts que flexbox resuelve mejor que ninguna alternativa.

⏱ 20 min

Flexbox resuelve bien un conjunto de problemas concreto y pequeño, y estos cuatro patrones lo cubren casi entero. Los cuatro son código pegable, sin dependencias y sin puntos de ruptura salvo donde son inevitables. Y los cuatro ilustran una idea distinta del nivel: la absorción de espacio, la asimetría entre un elemento fijo y uno flexible, el empuje vertical, y el envolvimiento controlado por el contenido.

🎯 Al terminar esta lección sabrás
  • Escribir de memoria los cuatro patrones y sus variantes principales.
  • Explicar qué mecanismo del algoritmo hace funcionar cada uno.
  • Construir un sidebar que colapsa sin una sola media query.
  • Elegir entre flexbox y grid para cada uno de los cuatro.

Barra de navegación y media object

El patrón más usado. Grupos de elementos con una separación asimétrica: unos al inicio, otros al final, y flexibilidad para que el conjunto aguante contenidos de longitud variable.

<header class="barra">
  <a class="marca" href="/">Producto</a>
  <nav class="enlaces">
    <a href="/precios">Precios</a>
    <a href="/docs">Documentación</a>
  </nav>
  <div class="acciones">
    <button class="secundaria">Entrar</button>
    <button class="primaria">Registrarse</button>
  </div>
</header>
.barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 1.5rem;
  min-block-size: 4rem;
  border-block-end: 1px solid #313244;
}
.marca { flex: none; font-weight: 700; }
.enlaces { display: flex; gap: 1rem; min-inline-size: 0; }
.acciones { display: flex; gap: 0.75rem; flex: none; margin-inline-start: auto; }

Tres decisiones importan. flex: none en marca y acciones evita que se aplasten cuando falta sitio. margin-inline-start: auto en las acciones las empuja al final sin depender del número de enlaces. Y min-inline-size: 0 en la navegación permite que sea el grupo que ceda cuando no cabe todo, que es lo que quieres.

El segundo patrón usa el mismo mecanismo con otra intención: una imagen o icono de tamaño fijo, y un cuerpo de texto que ocupa lo que sobra. Es el media object, el patrón que da nombre a un artículo de Nicole Sullivan de 2010 y sigue siendo el segundo layout más frecuente de la web.

<article class="media">
  <img class="media-figura" src="/avatar.jpg" alt="" width="64" height="64">
  <div class="media-cuerpo">
    <h3>Título del elemento</h3>
    <p>Descripción que puede ser tan larga como haga falta y se parte sola.</p>
  </div>
</article>
.media {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.media-figura {
  flex: none;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  object-fit: cover;
}
.media-cuerpo { flex: 1; min-inline-size: 0; }

El min-inline-size: 0 del cuerpo es imprescindible: sin él, un texto sin espacios o una URL larga activa el tamaño mínimo automático y el media object desborda su contenedor. Es el caso práctico más frecuente de lo que ya viste en el nivel 16.

align-items: flex-start en lugar del stretch por defecto evita que la figura se estire cuando el texto es más alto. Con la imagen ya dimensionada no ocurriría, pero con un icono SVG sin altura fija sí.

El pie que se queda abajo cuando hay poco contenido y se empuja hacia abajo cuando hay mucho. Antes de flexbox exigía alturas negativas y márgenes calculados; ahora son cuatro líneas.

<body class="pagina">
  <header>Cabecera</header>
  <main>Contenido</main>
  <footer>Pie</footer>
</body>
.pagina {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}
.pagina > main { flex: 1; }

El mecanismo es exactamente el que ya conoces: min-block-size: 100dvh garantiza que el contenedor mida al menos la altura del viewport, flex: 1 en el contenido lo hace absorber todo el espacio libre del eje principal, y el pie queda empujado al final. Con contenido abundante no sobra espacio, flex-grow no reparte nada y todo fluye con normalidad.

100dvh en lugar de 100vh importa en móvil: dvh sigue la altura visible dinámica cuando la barra del navegador se retrae, mientras que vh se queda con la altura grande y produce el clásico salto de un pie que aparece cortado.

💡
La variante con grid es más corta todavía

body { display: grid; grid-template-rows: auto 1fr auto; min-block-size: 100dvh; } hace lo mismo sin tener que tocar el hijo. Es una de las pocas veces en que grid gana en un layout de un solo eje, porque puede describir las tres bandas desde el contenedor.

El sidebar que colapsa sin media queries

El más interesante de los cuatro. Una barra lateral de ancho preferente junto a un contenido principal, que se apilan verticalmente cuando no caben, sin un solo punto de ruptura.

<div class="con-lateral">
  <aside class="lateral">Navegación secundaria</aside>
  <div class="principal">Contenido</div>
</div>
.con-lateral {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.lateral {
  flex: 1 1 18rem;         /* base preferente */
  max-inline-size: 22rem;  /* no crece más de esto */
}
.principal {
  flex: 999 1 60%;         /* factor enorme y base del 60% */
  min-inline-size: 0;
}

El truco está en el flex: 999 del contenido principal. Mientras los dos elementos caben en la misma línea, el reparto del espacio libre está tan sesgado hacia el principal que el lateral se queda prácticamente en su base de 18rem. Cuando el contenedor se estrecha por debajo de aproximadamente 18rem más el 60%, los tamaños hipotéticos ya no caben, el wrap manda cada uno a su línea, y ahí cada uno se lleva el 100% de su propia línea.

La consecuencia es un layout que se adapta al contenedor, no al viewport. Metido dentro de una tarjeta estrecha se apila; metido en el ancho completo de la página, no. Ninguna media query puede hacer eso, porque una media query pregunta por la ventana y este layout responde a su hueco real.

Este patrón viene del catálogo Every Layout de Heydon Pickering y Andy Bell, y es el ejemplo canónico de lo que se llama diseño intrínseco: el punto de ruptura no lo eliges tú, lo determina el punto exacto en el que el contenido deja de caber.

⚠️
El 60% no es arbitrario

El punto de colapso es el ancho del contenedor en el que la base del lateral más la base del principal superan el 100%. Con 18rem y 60%, colapsa cuando 18rem supera el 40% del contenedor, es decir alrededor de 45rem. Cambiar el porcentaje mueve el punto de colapso; es el único mando que tienes y conviene entenderlo antes de tocarlo.

Cuándo dejar de usar flexbox

Los cuatro patrones tienen algo en común: en todos hay un eje que importa y otro que es consecuencia. En cuanto los dos ejes importan, el modelo correcto es otro.

La barra de navegación es flex porque solo te importa la distribución horizontal. El media object es flex porque solo te importa el reparto horizontal entre figura y cuerpo. El sticky footer es flex porque solo te importa el reparto vertical. El sidebar es flex porque el colapso es un fenómeno de una dimensión.

Una galería de tarjetas alineadas en filas y columnas no lo es. Un formulario con etiquetas alineadas en dos columnas no lo es. Un panel de control con áreas nombradas no lo es. Y una tarjeta cuyos títulos deban alinearse con los de sus hermanas tampoco, aunque cada tarjeta por dentro sea flex.

⚡
Los patrones canónicos son componentes, y el diseño intrínseco es lo que los hace componibles

Lo que separa a los cuatro patrones de esta lección de una colección de trucos es que ninguno depende del sitio donde lo pongas. La barra funciona con dos enlaces y con nueve. El media object funciona con un párrafo y con quince. El sidebar colapsa cuando no cabe, esté donde esté. Esa autonomía no es casual: es la propiedad que buscas cuando escribes CSS para un sistema en el que otras personas colocarán tus componentes en contextos que no puedes prever. Y tiene un enemigo concreto con nombre propio: la media query, que rompe la autonomía porque ata el comportamiento de un componente a una medida global de la ventana en la que no está pensando nadie cuando lo reutiliza. Un componente con puntos de ruptura funciona en la maqueta donde lo diseñaste y se comporta de forma absurda dentro de un panel lateral, en una vista dividida o en un iframe. El diseño intrínseco es la alternativa: en vez de decirle a tu componente en qué ancho de ventana debe cambiar, describe las condiciones bajo las cuales su contenido deja de caber y deja que el motor descubra el punto exacto. Las container queries llevaron esa idea al terreno explícito, pero conviene ver que flexbox ya la permitía desde 2015 con las herramientas de este nivel: bases, factores y wrap. La diferencia entre un layout que envejece bien y uno que hay que rehacer cada dos años no está casi nunca en la técnica que usaste, sino en si el componente sabe algo sobre el mundo exterior que no debería saber.

⚔️ Los cuatro, sin mirar
  1. Escribe la barra de navegación de memoria y comprueba que aguanta al añadir cinco enlaces más.
  2. Rompe el media object metiéndole una URL larguísima y arréglalo.
  3. Monta el sticky footer y verifica en móvil que dvh se comporta distinto de vh.
  4. Construye el sidebar y encuentra experimentalmente su punto de colapso. Compáralo con el cálculo.
  5. Mete el sidebar dentro de otro sidebar y comprueba que el interior colapsa antes que el exterior.
  6. Reescribe los cuatro en grid y decide, para cada uno, cuál de las dos versiones defenderías en una revisión de código.