Generador Flexbox

Constructor Visual de Flexbox con Vista Previa y Exportación de Código

Un generador de CSS Flexbox interactivo y herramienta de aprendizaje. Visualiza cómo funcionan las propiedades de flexbox en tiempo real. Ajusta propiedades de contenedor e items con vista previa instantánea. Exporta código CSS usando el flex shorthand canónico más un bloque de marcado HTML correspondiente, para pegar un fragmento completo de contenedor e items directamente en tu proyecto.

¿Qué es CSS Flexbox?

CSS Flexbox (Flexible Box Layout) es un método de layout unidimensional para organizar items en filas o columnas. Hace que layouts complejos sean simples y responsivos.

Conceptos clave:

Flex Container:
- Elemento padre con display: flex
- Controla la organización de items hijos
- Propiedades: flex-direction, flex-wrap, justify-content, align-items, gap

Flex Items:
- Hijos directos del flex container
- Pueden crecer, encogerse y alinearse independientemente
- Propiedades: flex-grow, flex-shrink, flex-basis, align-self, order

Ventajas:
- Centrado vertical fácil
- Columnas de altura igual
- Espaciado flexible
- Responsivo sin media queries
- Reordenar items visualmente

¿Cómo funciona flex-direction?

flex-direction define el eje principal y flujo de items:

Valores:
- row (predeterminado): Izquierda a derecha →
- row-reverse: Derecha a izquierda ←
- column: Arriba a abajo ↓
- column-reverse: Abajo a arriba ↑

Eje Principal vs Eje Cruzado:
- row: eje principal = horizontal, cruzado = vertical
- column: eje principal = vertical, cruzado = horizontal

Esto afecta:
- justify-content (alineación eje principal)
- align-items (alineación eje cruzado)
- interpretación de flex-basis

¿Cuál es la diferencia entre justify-content y align-items?

Controlan alineación en diferentes ejes:

justify-content (Eje Principal):
- flex-start: Agrupar items al inicio
- flex-end: Agrupar items al final
- center: Centrar items
- space-between: Espacio uniforme entre items
- space-around: Espacio uniforme alrededor de items
- space-evenly: Espacio igual en todas partes

align-items (Eje Cruzado):
- stretch: Estirar para llenar contenedor
- flex-start: Alinear al inicio
- flex-end: Alinear al final
- center: Centrar items
- baseline: Alinear líneas base del texto

Patrones comunes:
center + center = Centrado perfecto
space-between + center = Barra de navegación
flex-start + stretch = Layout sidebar

¿Cómo funcionan flex-grow, flex-shrink y flex-basis?

Estos controlan cómo los items se dimensionan:

flex-grow (predeterminado: 0):
- Cuánto crece el item relativo a otros
- 0 = no crecer
- 1 = crecer igual que otros items flex-grow: 1
- 2 = crecer el doble que items flex-grow: 1

flex-shrink (predeterminado: 1):
- Cuánto se encoge el item cuando hay poco espacio
- 0 = no encogerse
- 1 = encogerse igual
- Mayor = encogerse más

flex-basis (predeterminado: auto):
- Tamaño inicial antes de crecer/encoger
- auto = usar contenido/width/height
- 0 = ignorar tamaño de contenido
- 200px = comenzar en 200px
- 25% = comenzar en 25% del contenedor

¿Cuáles son los patrones de layout flexbox comunes?

Patrones flexbox populares:

Centrado:
justify-content: center;
align-items: center;

Barra de Navegación:
justify-content: space-between;
align-items: center;

Columnas de Ancho Igual:
.item { flex: 1; }

Layout Sidebar:
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }

Holy Grail (3 columnas):
.left { flex: 0 0 200px; }
.center { flex: 1; }
.right { flex: 0 0 200px; }

Cuadrícula de Cards:
flex-wrap: wrap;
gap: 20px;
.card { flex: 0 0 calc(33.33% - 20px); }

¡Esta herramienta incluye estos como presets!

¿Qué significa el flex shorthand (flex: grow shrink basis)?

flex es la abreviatura de flex-grow, flex-shrink y flex-basis en ese orden. La mayoría de los proyectos y linters lo esperan en lugar de tres líneas separadas, por eso esta herramienta lo genera por defecto (desactívalo para ver la forma larga).

flex: 1 1 0 → crece para llenar, puede encogerse, ignora el tamaño del contenido (columnas iguales)
flex: 0 0 200px → fijo en 200px, nunca crece ni se encoge (sidebar)
flex: 1 1 auto → crece pero parte del tamaño del contenido

Formas de valor único comunes:
flex: 1 = flex: 1 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto
flex: initial = flex: 0 1 auto (el predeterminado)

Casos límite:
- Un valor único sin unidad (flex: 1) pone flex-basis en 0, no en auto. Esto confunde: flex: 1 colapsa al contenido cero, mientras que flex-grow: 1 solo mantiene flex-basis: auto.
- Incluye siempre una unidad en el basis (0% o 0px) si quieres ser explícito.

Flexbox vs CSS Grid: ¿cuándo usar cada uno?

Resuelven problemas distintos y a menudo trabajan juntos.

Usa Flexbox para layouts unidimensionales (una sola fila o columna): barras de navegación, toolbars, grupos de botones, centrar un elemento, distribuir items a lo largo de un eje con gap y justify-content. Flexbox parte del contenido.

Usa CSS Grid para layouts bidimensionales (filas y columnas a la vez): plantillas de página, galerías, dashboards, cualquier cosa con pistas explícitas y alineación en ambas direcciones. Grid parte de la estructura.

Regla práctica:
- Alinear items en una línea → Flexbox
- Construir una cuadrícula real de filas y columnas → Grid
- Una página real suele usar Grid para el esqueleto y Flexbox dentro de cada celda.

Ambos admiten la propiedad gap y las mismas palabras clave de alineación (justify-content, align-items).

Características Principales

• Vista previa en vivo interactiva
• Todas las propiedades del contenedor (direction, wrap, justify, align)
• Todas las propiedades de items (grow, shrink, basis, align-self, order)
• Agregar y eliminar flex items
• Haz clic en items para editar propiedades individuales
• Control de gap para espaciado
• 8 patrones de layout predefinidos
• Copiar código CSS listo para usar
• Salida con flex shorthand canónico (activable/desactivable)
• Bloque de marcado HTML correspondiente copiable
• Herramienta de aprendizaje visual
• Procesamiento 100% del lado del cliente