Playground Flexbox
Experimenta con CSS Flexbox de forma visual.
Contenedor flex
/* Contenedor */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
Playground interactivo de CSS Flexbox
CSS Flexbox (Flexible Box Layout) es uno de los sistemas de layout más poderosos y utilizados en el desarrollo web moderno. Permite distribuir espacio y alinear elementos dentro de un contenedor de forma flexible y predecible, incluso cuando el tamaño de los elementos es desconocido o dinámico. Flexbox simplifica enormemente tareas de diseño que antes requerían hacks complicados con floats o positioning.
Nuestro playground de Flexbox te permite experimentar visualmente con todas las propiedades del contenedor flex: flex-direction (dirección del eje principal), justify-content (alineación en el eje principal), align-items (alineación en el eje transversal), flex-wrap (comportamiento de desbordamiento) y gap (espacio entre elementos). También puedes configurar propiedades individuales de cada item: order, flex-grow, flex-shrink y align-self.
La vista previa se actualiza en tiempo real, permitiéndote ver inmediatamente cómo cada propiedad afecta la distribución de los elementos. Puedes agregar y eliminar items, hacer clic en cualquier item para seleccionarlo y editar sus propiedades individuales, y finalmente copiar el código CSS generado para usarlo directamente en tu proyecto. Es la herramienta perfecta para aprender Flexbox o para prototipar layouts rápidamente.
Preguntas frecuentes
¿Cuándo debo usar Flexbox vs Grid?
Flexbox es ideal para layouts unidimensionales (una fila o una columna), como barras de navegación, listas de tarjetas horizontales o alineación de elementos dentro de un contenedor. CSS Grid es mejor para layouts bidimensionales (filas y columnas simultáneamente), como layouts de página completa o galerías complejas.
¿Qué hace flex-grow?
flex-grow define cuánto puede crecer un item para llenar el espacio disponible en el contenedor. Un valor de 0 (por defecto) significa que el item no crece. Si un item tiene flex-grow: 1 y otro flex-grow: 2, el segundo crecerá el doble que el primero.
¿Es compatible con todos los navegadores?
Sí, CSS Flexbox tiene soporte completo en todos los navegadores modernos desde hace años. Chrome, Firefox, Safari, Edge y Opera lo soportan sin necesidad de prefijos. Solo Internet Explorer 10-11 tenía una implementación parcial y con errores.
¿Quieres saber más? Lee nuestra guía completa →