Maquetación Web Dinámica / Layouts I: Flexbox completo

Reto: replica el header de YouTube

Reto35 min60 XP

El header de YouTube es un examen de Flexbox disfrazado de barra: tres zonas, una búsqueda elástica con botón pegado, iconos que jamás se deforman. Lo usas todos los días — hoy lo construyes.

Reto

Replica el header de YouTube

Media30 min60 XP(×2 sin mirar la solución)

Qué debes construir

La barra superior de YouTube (versión desktop), con sus tres zonas:

<header class="yt-header">
<div class="zona-izq">
  <button class="icono" aria-label="Menú">☰</button>
  <span class="logo"><span class="logo-icono">▶</span>MiTube</span>
</div>
<div class="zona-centro">
  <input type="search" placeholder="Buscar" aria-label="Buscar">
  <button class="btn-buscar" aria-label="Buscar">⌕</button>
</div>
<div class="zona-der">
  <button class="icono" aria-label="Crear">✚</button>
  <button class="icono" aria-label="Notificaciones">🔔</button>
  <div class="avatar">M</div>
</div>
</header>

body { font-family: system-ui; padding: 16px; background: #f8fafc; }
.yt-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 16px; }
.zona-izq { display: flex; align-items: center; gap: 12px; flex: none; }
.icono { background: none; border: none; font-size: 18px; cursor: pointer; color: #1e293b; padding: 6px; border-radius: 50%; }
.logo { font-weight: 800; font-size: 18px; color: #1e293b; display: flex; align-items: center; gap: 6px; }
.logo-icono { color: #dc2626; }
.zona-centro { display: flex; flex: 0 1 560px; min-width: 0; }
.zona-centro input { flex: 1; min-width: 0; border: 1px solid #cbd5e1; border-radius: 20px 0 0 20px; padding: 8px 16px; font-size: 14px; }
.btn-buscar { border: 1px solid #cbd5e1; border-left: none; background: #f1f5f9; border-radius: 0 20px 20px 0; padding: 8px 20px; font-size: 16px; cursor: pointer; }
.zona-der { display: flex; align-items: center; gap: 8px; flex: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #6d28d9; color: white; display: grid; place-items: center; font-weight: 700; font-size: 14px; }

Requisitos:

Tres zonas: izquierda (menú hamburguesa + logo), centro (búsqueda), derecha (2 iconos + avatar). Header de una sola fila, todo centrado verticalmente.
La búsqueda es elástica: crece hasta un máximo de ~560px y se encoge cuando falta espacio. Las zonas laterales NUNCA se deforman.
El input y el botón de búsqueda van PEGADOS (un grupo con las esquinas redondeadas solo por fuera, como una pastilla partida).
Iconos: usa emojis o caracteres (☰ ✚ 🔔 ⌕) — el reto es el layout, no los SVG. Cada botón-icono con su aria-label.
El avatar es un círculo con una inicial.

Reglas

Solo Flexbox para el layout (nada de position ni float).
Cada zona es su propio contenedor flex (anidar es el camino).
Achica la ventana: la búsqueda debe ceder ANTES que cualquier otra cosa.

30:00

Cuando estés listo, arranca el reloj.

El razonamiento: es el patrón navbar (space-between + center) con tres hijos, donde el del centro es a la vez el patrón búsqueda elástica (flex: 0 1 560px: basis generosa, shrink permitido, grow negado — así tiene tamaño ideal pero cede primero). Las laterales con flex: none declaran "nosotras medimos lo nuestro". El grupo input+botón es un tercer flex interno sin gap, con los radius repartidos para formar la pastilla.

El código completo es el de la vista previa de arriba — esta vez el enunciado ES la solución renderizada, así que el ejercicio honesto era no inspeccionarla. Las líneas que valen oro, comentadas:

styles.css

Verifica tu versión con la prueba del estrés: 1400px, 900px y 500px de ancho. En los tres casos las zonas laterales miden idéntico, y solo la búsqueda respira. Si eso se cumple, tu Flexbox ya es de producción.

Qué sigue

Un reto más y cierras el módulo: la galería estilo Pinterest con wrap — el patrón de tarjetas equidistantes puesto a prueba con contenido de altura variable.