Guía de herramientas Flexbox

Publicado el 2026-10-08 · Actualizado el 2026-10-08

Flexbox permite organizar elementos en filas o columnas con control claro de alineación, espacios, ajuste y respuesta a distintos tamaños. Esta guía explica cómo usarlo de forma intencional.

Comprende primero el contenedor flex

Flexbox comienza en el contenedor. Cuando un elemento se convierte en contenedor flex, sus hijos directos pasan a seguir sus reglas. Antes de tocar cada elemento, decide si el grupo debe ir en fila o columna y cuál es su función. Una navegación, un grupo de acciones o el pie de una tarjeta pueden usar Flexbox con objetivos distintos.

Piensa en eje principal y eje transversal. En row, el principal es horizontal; en column, vertical. Esto explica el comportamiento de justify-content y align-items. Si algo no encaja, revisa primero flex-direction y después identifica qué eje deseas controlar.

• Elige fila o columna de forma intencional.
• Identifica ambos ejes.
• Ajusta primero el contenedor.

Usa la alineación con un objetivo claro

justify-content distribuye elementos en el eje principal y align-items los alinea en el eje transversal. En una cabecera horizontal, uno puede separar logo y acciones y el otro centrarlos verticalmente. En una columna, las direcciones cambian.

No uses alineación para compensar problemas de espacio no relacionados. Si solo un elemento necesita una posición distinta, una regla como align-self puede ser más adecuada. Mantener reglas simples facilita el comportamiento responsive.

• justify-content para el eje principal.
• align-items para el transversal.
• Usa excepciones con moderación.

Gestiona los espacios con gap

gap suele ser la forma más limpia de crear espacios consistentes entre elementos flex. El padre controla la separación y no necesitas añadir márgenes distintos a cada hijo. Funciona muy bien en botones, tarjetas, menús, formularios y barras de herramientas.

Los márgenes siguen siendo útiles para relaciones especiales, pero no deben resolver todo el espaciado. Un gap centralizado facilita reordenar, envolver y mantener el diseño. Con Infera Agent, describe la relación visual deseada en lugar de pedir márgenes arbitrarios sin contexto.

• Prefiere gap para espacios regulares.
• Usa márgenes para excepciones.
• Mantén el espaciado en el contenedor.

Planifica wrapping y comportamiento responsive

Una fila que funciona en escritorio puede desbordarse en móvil. flex-wrap permite que los elementos pasen a nuevas líneas cuando falta espacio. Es útil en filtros, etiquetas, grupos de acciones y tarjetas.

Prueba con textos reales, traducciones y valores largos. Los placeholders cortos pueden ocultar problemas. Si el wrapping rompe el orden lógico, cambia la agrupación o pasa a columna en un breakpoint. Responsive no significa solo hacer que todo quepa, sino preservar una interacción clara.

• Prueba contenido real.
• Revisa pantallas estrechas e idiomas.
• Conserva un orden lógico.

Controla crecimiento y reducción con cuidado

flex-grow, flex-shrink y flex-basis determinan cómo se reparte el espacio. Usa grow cuando un elemento debe ocupar el espacio restante, como un buscador entre controles fijos. Limita shrink cuando un control debe conservar una anchura mínima.

Evita valores arbitrarios para cada hijo. Usa patrones simples: controles fijos con área central flexible, o barra lateral estable con panel principal expansible. Combina Flexbox con min-width y max-width para proteger contenido importante.

• Usa grow para espacio restante.
• Protege controles importantes del shrink excesivo.
• Combina con tamaños mínimos y máximos.

Crea patrones reutilizables

Convierte layouts que funcionan en patrones reutilizables: pilas centradas, cabeceras divididas, filas de botones, toolbars responsive, pies de tarjetas o pares etiqueta-valor. Define dirección, alineación, gap, wrap y elementos flexibles.

Prueba contenido largo, estados vacíos, botones extra, elementos ocultos y localización. Un buen patrón debe resistir cambios normales sin ajustes manuales. Si usas Infera Agent, describe el comportamiento esperado en distintos anchos y valida el resultado en el navegador.

• Crea patrones repetibles.
• Prueba casos límite.
• Valida en varios anchos.

Preguntas

Empieza gratis Plantillas