Patrones flex del mundo real: los 5 que resuelven casi todo

Teoría completa. Ahora, oficio: los cinco patrones flex que aparecen en prácticamente toda interfaz que existe. Apréndelos como recetas con razonamiento — cuando reconozcas el patrón en un diseño, el código saldrá solo.

1. La navbar (space-between + center)

<nav class="navbar">
<span class="logo">Forge</span>
<div class="enlaces">
  <a href="#">Cursos</a><a href="#">Precios</a><a class="cta" href="#">Entrar</a>
</div>
</nav>

body { font-family: system-ui; padding: 20px; }
.navbar { display: flex; justify-content: space-between; align-items: center; background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 20px; }
.logo { font-weight: 800; color: #6d28d9; }
.enlaces { display: flex; align-items: center; gap: 20px; }
.enlaces a { color: #334155; text-decoration: none; font-size: 14px; font-weight: 500; }
.enlaces a.cta { background: #6d28d9; color: white; padding: 8px 16px; border-radius: 8px; }

Dos flex anidados: el navbar reparte a los extremos, y el grupo de enlaces es OTRO flex con gap. Anidar contenedores flex es lo normal, no la excepción.

2. El media object (imagen fija + texto elástico)

El patrón de todo comentario, notificación y resultado de búsqueda:

<div class="media">
<div class="avatar">MG</div>
<div class="cuerpo">
  <p class="nombre">Miguel García</p>
  <p class="texto">El avatar no se deforma nunca (flex: none) y este texto toma todo el resto y dobla las líneas que necesite.</p>
</div>
</div>

body { font-family: system-ui; padding: 20px; }
.media { display: flex; gap: 12px; align-items: flex-start; background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #6d28d9; color: white; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.cuerpo { min-width: 0; }
.nombre { margin: 0; font-weight: 700; font-size: 14px; color: #1e293b; }
.texto { margin: 4px 0 0; font-size: 14px; color: #475569; line-height: 1.5; }

Las claves: flex: none en el avatar (jamás se encoge), align-items: flex-start (el avatar arriba aunque el texto crezca) y un detalle de veterano: min-width: 0 en el cuerpo — los flex items se niegan a encogerse por debajo de su contenido, y esa línea les da permiso (sin ella, una palabra larguísima o una URL rompe el layout).

3. El centrado perfecto

.overlay {
display: flex;
justify-content: center;
align-items: center;
min-height: 100dvh;
}

Ya lo conoces de la lección 2 — está aquí porque ES uno de los cinco: úsalo para modales, pantallas de carga, secciones hero y estados vacíos.

4. El footer pegado abajo (sticky footer)

El clásico: en páginas cortas el footer flota a media pantalla. La cura, con flex en column:

5. Tarjetas equidistantes que doblan

El truco está en la basis: cuando no caben tres de 250px, la tercera dobla y las otras crecen para llenar la fila. Responsive sin una sola media query.

Mini-reto

Implementa el sticky footer en tu periódico (body flex column, main con flex: 1) y borra la mitad del contenido para verificar que el footer se queda abajo. Cinco minutos, y no volverás a ver un footer flotante en tus proyectos.

Qué sigue

Tienes patrones y teoría. Hora de demostrar: el primer reto del módulo — replicar el header de YouTube, uno de los flex más famosos del planeta.