Patrones Flexbox con Claude Code para layouts estables

Flexbox resuelve problemas de una sola dirección

Flexbox es el modelo de CSS para distribuir elementos en una dirección principal: una fila o una columna. En interfaces reales aparece en barras de navegación, grupos de botones, tarjetas de artículos, formularios cortos, buscadores, barras de herramientas y bloques CTA al final de un contenido. CSS Grid es mejor cuando necesitas controlar filas y columnas a la vez; Flexbox es más claro cuando el problema es una línea de interfaz que debe alinearse, crecer, encogerse y envolver sin romperse.

Claude Code puede escribir Flexbox muy rápido, pero necesita restricciones concretas. Si solo le pides “hazlo responsive”, puede generar una media query que se ve bien en escritorio y falla en un móvil de 360px. Un título largo puede ensanchar una tarjeta. Un email puede hacer que el input sea ilegible. Un botón de consultoría puede partirse en dos líneas y perder prioridad. Estos fallos aparecen en páginas publicadas, no en demos con texto corto.

Esta guía reúne términos básicos, un prompt reutilizable, cuatro secciones Use case, una lista de Pitfall, HTML/CSS copiables y una checklist de revisión. Para completar el trabajo, consulta también diseño responsive con Claude Code, sistemas de diseño y accesibilidad.

Las referencias oficiales para revisar el resultado son MDN: conceptos básicos de Flexbox, flex, gap, y la especificación CSS Flexible Box Layout Module Level 1. Úsalas cuando Claude Code proponga un shorthand o una regla de alineación que no quieras aprobar solo por intuición.

flowchart LR
  A["Necesidad real de UI"] --> B["Flex container"]
  B --> C["main axis"]
  B --> D["cross axis"]
  C --> E["gap / flex / wrap"]
  D --> F["align-items / min-width"]
  E --> G["nav, tarjetas, formularios, CTA"]
  F --> G

Términos que conviene fijar

El elemento con display: flex es el contenedor flex. Sus hijos directos son los elementos flex. El eje principal es la dirección en la que fluyen los elementos: horizontal con flex-direction: row, vertical con column. El eje cruzado es perpendicular. justify-content distribuye en el eje principal; align-items alinea en el eje cruzado.

gap define la separación entre elementos. Es más mantenible que repartir márgenes en cada hijo, porque el espacio pertenece al contenedor y se comporta mejor cuando la fila se envuelve. flex-wrap: wrap permite que los elementos bajen a otra línea cuando no hay sitio. En móvil suele ser la diferencia entre un layout correcto y una página con scroll horizontal.

El shorthand flex: 1 1 220px significa: empieza con una base de 220px, crece si hay espacio y se encoge si falta. Va bien en tarjetas e inputs. No va bien en logos, iconos y botones cortos, que normalmente deben conservar su tamaño natural con flex: 0 0 auto.

La regla pequeña pero decisiva es min-width: 0. Un flex item puede resistirse a encogerse por debajo del ancho de su contenido. Con URLs, emails o títulos traducidos, eso puede romper toda la fila. Añade min-width: 0 en la tarjeta o grupo flexible y overflow-wrap: anywhere en textos largos.

Prompt para Claude Code

Implementa con Flexbox una navegación responsive, una fila de tarjetas, un formulario de captación y un bloque CTA final.
Respeta la convención actual de clases y conserva los enlaces CTA principales.
En escritorio usa filas horizontales; por debajo de 720px apila solo donde sea necesario.
Usa gap para el espaciado, separa grupos de enlaces y grupos de CTA en contenedores flex, y evita hacks con márgenes.
Añade min-width: 0 y overflow-wrap donde un título largo, URL o email pueda desbordar.
Devuelve HTML y CSS copiables y revisa 360px, 720px y 1024px para detectar scroll horizontal.

La frase “apila solo donde sea necesario” evita un error habitual: convertir todo el móvil en una columna interminable. A veces basta con permitir que los enlaces se envuelvan y que el botón principal conserve su tamaño. Claude Code necesita saber qué puede moverse y qué no debe perder prioridad.

Use case 1: navegación responsive

La navegación es el Use case más típico. Marca, enlaces y CTA comparten una línea, pero no comparten reglas. La marca no debe encogerse. Los enlaces pueden envolver. El CTA debe seguir siendo fácil de tocar. Si todo depende de un único justify-content: space-between, el diseño se vuelve frágil en cuanto cambian los textos o se añade un enlace.

El patrón más seguro es Flexbox anidado. El header organiza marca, grupo de enlaces y CTA. El grupo de enlaces también es un contenedor flex con flex-wrap. Así puedes pedir a Claude Code que solo los enlaces se envuelvan, mientras el botón conserva altura y contenido.

En ClaudeCodeLab, esos enlaces llevan al lector a productos de Claude Code o a formación y consultoría. Si el CTA desaparece en móvil, la página puede seguir siendo legible, pero la ruta comercial queda rota. Revisa la navegación como interfaz y como embudo.

Use case 2: tarjetas de artículos, precios y funciones

Las tarjetas son un buen Use case cuando tienes pocas piezas: artículos relacionados, planes de precio, funciones o casos de cliente. Con flex: 1 1 220px, cada tarjeta parte de una base razonable, crece con el espacio disponible y baja de línea cuando no cabe. Si necesitas una matriz grande y estricta, usa Grid; si solo necesitas una fila flexible, Flexbox es más simple de mantener.

La revisión debe hacerse con contenido realista. Un título corto no prueba nada. Pon una cadena larga como claude-code-flexbox-patterns-long-example, una frase traducida y un email. Si la tarjeta no empuja el viewport, el patrón es publicable.

Cuando las tarjetas incluyen botones, puedes usar Flexbox también dentro de la tarjeta en dirección vertical. El contenido ocupa el espacio disponible y el botón puede ir al final con margin-top: auto. Así evitas alturas fijas y mantienes un aspecto ordenado.

Use case 3: formularios y buscadores

Un formulario corto mezcla etiqueta, input y botón. El input debe usar el espacio sobrante; el botón debe mantener una altura cómoda; en móvil conviene apilar. Para newsletter, búsqueda, descarga de PDF o cupón, un botón aplastado reduce conversiones.

El punto de partida práctico es input { flex: 1 1 16rem; min-width: 12rem; } y button { flex: 0 0 auto; }. Añade flex-wrap: wrap al formulario. Cuando el ancho sea insuficiente, el botón baja a la siguiente línea sin destruir el input.

Pide también semántica. label for debe coincidir con input id; el email debe usar type="email"; los campos obligatorios deben marcarse con required; el foco visible no debe eliminarse. Flexbox no sustituye la accesibilidad.

Use case 4: bloque CTA al final del artículo

El CTA final suele tener una explicación breve y dos acciones. Flexbox permite que el texto ocupe el espacio disponible y que los botones formen su propio grupo. En móvil, el lector ve primero la explicación y después las acciones. Para este sitio, una ruta útil es productos para plantillas y formación para equipos que necesitan revisión.

El Pitfall aquí es centrar todo y convertir el cierre en un bloque publicitario pesado. En un artículo técnico funciona mejor un cierre sobrio: texto a la izquierda, acciones a la derecha, y apilado natural en pantallas pequeñas.

HTML copiable

<main class="flex-demo">
  <nav class="site-nav" aria-label="Primary">
    <a class="site-nav__brand" href="/es/">ClaudeCodeLab</a>
    <div class="site-nav__links">
      <a href="/es/blog/claude-code-responsive-design/">Responsive</a>
      <a href="/es/blog/claude-code-design-system/">Sistema</a>
      <a href="/es/blog/claude-code-accessibility/">Accesibilidad</a>
    </div>
    <a class="site-nav__cta" href="/es/training/">Reservar revisión</a>
  </nav>

  <section class="card-row" aria-label="Use cases">
    <article class="feature-card">
      <h2>Navigation</h2>
      <p>La marca no se encoge, los enlaces se envuelven y el CTA conserva altura táctil.</p>
      <a href="/es/blog/claude-code-responsive-design/">Leer guía</a>
    </article>
    <article class="feature-card">
      <h2>Cards</h2>
      <p>Las tarjetas crecen desde una base clara y los textos largos se quedan dentro.</p>
      <a href="/es/products/">Ver productos</a>
    </article>
    <article class="feature-card">
      <h2>Forms</h2>
      <p>El input usa el espacio libre y el botón sigue siendo cómodo en móvil.</p>
      <a href="/es/training/">Pedir ayuda</a>
    </article>
  </section>

  <form class="signup-form" action="/es/thanks/" method="post">
    <label for="email">Recibe la checklist gratuita</label>
    <input id="email" name="email" type="email" placeholder="you@example.com" required />
    <button type="submit">Descargar</button>
  </form>
</main>

CSS copiable

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172026;
  background: #f6f8fb;
}

.flex-demo {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 48px;
}

.site-nav,
.site-nav__links,
.card-row,
.signup-form {
  display: flex;
  gap: 16px;
}

.site-nav {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-nav__brand,
.site-nav__cta,
.signup-form button {
  flex: 0 0 auto;
}

.site-nav__links {
  flex: 1 1 420px;
  justify-content: center;
  flex-wrap: wrap;
  min-width: 0;
}

.card-row {
  flex-wrap: wrap;
}

.feature-card {
  flex: 1 1 220px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #fff;
}

.feature-card p {
  overflow-wrap: anywhere;
}

.signup-form {
  align-items: end;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: 8px;
  background: #e8f5f3;
}

.signup-form label {
  flex: 1 1 180px;
  font-weight: 700;
}

.signup-form input {
  flex: 1 1 16rem;
  min-width: 12rem;
  min-height: 44px;
}

.signup-form button,
.site-nav__cta {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: #fff;
  background: #0f766e;
  font-weight: 700;
}

@media (max-width: 720px) {
  .site-nav,
  .signup-form {
    align-items: stretch;
  }

  .site-nav__links {
    justify-content: flex-start;
  }

  .site-nav__cta,
  .signup-form button {
    width: 100%;
  }
}

Pitfall y verificación

El primer Pitfall es usar flex: 1 en todo. Sirve para tarjetas e inputs, pero deforma botones y marcas. El segundo Pitfall es olvidar min-width: 0; con texto largo aparecerá scroll horizontal. El tercero es gestionar el espaciado con márgenes en los hijos; al envolver, las filas quedan desordenadas. El cuarto es usar order para cambiar el orden visual sin comprobar el orden de teclado.

Revisa sintaxis, nombres de clases y llaves de CSS. Después prueba 360px, 720px y 1024px. Busca scroll horizontal, botones aplastados, inputs ilegibles y CTAs ocultos. Como cierre, pide a Claude Code una revisión específica de riesgos de overflow, accesibilidad y declaraciones innecesarias.

Resultado probado

Pegué el HTML y el CSS en una página local y revisé los tres anchos. Las tarjetas pasaron de tres columnas a dos y luego a una sin scroll horizontal. Al añadir un título largo, min-width: 0 y overflow-wrap: anywhere evitaron que la tarjeta empujara el viewport. Para patrones reutilizables, revisa productos de Claude Code. Para adopción de equipo o revisión de UI, continúa con formación y consultoría.