Playground de Flexbox CSS

Configura visualmente las propiedades del contenedor e ítems de CSS flexbox con una vista previa en vivo. Genera código CSS listo para usar con flex-direction, justify-content, align-items y más.

Presets

Propiedades del Contenedor

flex-direction

flex-wrap

justify-content

align-items

align-content

gap: 8px

Propiedades del Ítem

flex-grow

flex-shrink

flex-basis

align-self

order

Vista Previa en Vivo

CSS del Contenedor

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

CSS de Ítems

.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

Phone Number Formatter

Border Radius Generator

Herramientas Relacionadas

Grid Layout Designer

CSS Animation Generator

Box Shadow Generator

Gradient Generator

NEW!

Glassmorphism Generator

UI Color Accessibility Checker

Color Scheme Generator

Pure Color Image Generator

Share this tool

Help others discover CSS Flexbox Playground

Acerca del Playground de Flexbox CSS

Cómo Funciona

Ajusta las propiedades del contenedor como flex-direction, flex-wrap, justify-content, align-items y align-content
Agrega hasta 6 ítems flex y configura cada uno de forma independiente con flex-grow, flex-shrink, flex-basis, align-self y order
Previsualiza tu diseño en tiempo real al cambiar cualquier propiedad
Copia el código CSS del contenedor e ítems directamente en tu proyecto
Usa presets para explorar rápidamente patrones flexbox comunes

Casos de Uso Comunes

Aprender propiedades de diseño flexbox de forma interactiva
Crear prototipos de barras de navegación, cuadrículas de tarjetas y barras laterales
Depurar problemas complejos de alineación flexbox
Generar CSS base para patrones de diseño comunes
Enseñar conceptos de CSS flexbox a estudiantes

Preguntas Frecuentes

¿Qué es el Playground de Flexbox CSS?

El Playground de Flexbox CSS es una herramienta interactiva que te permite configurar visualmente todas las propiedades del contenedor e ítems flexbox. Los cambios aparecen instantáneamente en una vista previa en vivo y el código CSS listo para usar se genera automáticamente.

¿Qué propiedades del contenedor puedo configurar?

Puedes configurar las seis propiedades principales del contenedor flex: flex-direction (row, row-reverse, column, column-reverse), flex-wrap (nowrap, wrap, wrap-reverse), justify-content (flex-start, flex-end, center, space-between, space-around, space-evenly), align-items (stretch, flex-start, flex-end, center, baseline), align-content (stretch, flex-start, flex-end, center, space-between, space-around) y gap (valor en píxeles).

¿Qué propiedades puedo configurar por ítem flex?

Cada ítem flex puede configurarse con: flex-grow (cuánto espacio extra toma el ítem), flex-shrink (cuánto se reduce cuando el espacio es limitado), flex-basis (el tamaño inicial), align-self (anulación de alineación individual) y order (orden visual en el contenedor).

¿Cuántos ítems flex puedo agregar?

Puedes agregar hasta 6 ítems flex. Haz clic en el botón '+ Agregar Ítem' para añadir más. Cada ítem tiene un código de color para que puedas identificarlo fácilmente en la vista previa y el panel de configuración.

¿Cómo selecciono y edito un ítem flex específico?

Haz clic en cualquier pestaña numerada en la parte superior del panel de Propiedades del Ítem para seleccionarlo. También puedes hacer clic directamente en un ítem en la vista previa en vivo. El ítem seleccionado se resaltará con un borde de color.

¿Qué son los presets y cómo los uso?

Los presets son configuraciones flexbox listas para diseños comunes: 'Fila Centrada' centra los ítems horizontal y verticalmente, 'Columna Centrada' apila los ítems verticalmente y los centra, 'Espacio Entre' distribuye los ítems de forma uniforme, 'Cuadrícula Envolvente' usa flex-wrap para que los ítems pasen a nuevas líneas, 'Ítems Estirados' usa flex-grow para que los ítems llenen el espacio disponible, y 'Fila Inversa' invierte el orden de visualización. Haz clic en un preset para aplicarlo instantáneamente.

¿Qué hace flex-grow?

flex-grow define cuánto crece un ítem flex en relación a otros ítems cuando hay espacio extra en el contenedor. Un valor de 0 significa que el ítem no crecerá. Un valor de 1 significa que toma una parte igual del espacio extra. Un valor de 2 significa que toma el doble de espacio que un ítem con flex-grow: 1.

¿Qué hace flex-shrink?

flex-shrink define cuánto se reduce un ítem flex en relación a otros ítems cuando no hay suficiente espacio en el contenedor. Un valor de 0 evita que el ítem se reduzca. Un valor de 1 (predeterminado) significa que se reduce proporcionalmente. Un valor de 2 significa que se reduce el doble de rápido.

¿Qué valores puede aceptar flex-basis?

flex-basis establece el tamaño inicial de un ítem flex antes de distribuir el espacio libre. Acepta: 'auto' (usa el ancho o alto del ítem), un valor de longitud como '100px' o '20%', 'content' (basado en el contenido) o '0' (el ítem comienza desde cero). Puedes escribir cualquier valor CSS válido.

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

align-items es una propiedad del contenedor que aplica a todos los ítems flex por defecto. align-self anula align-items para un ítem individual. Por ejemplo, si el contenedor tiene align-items: center pero un ítem tiene align-self: flex-end, todos los ítems estarán centrados excepto ese ítem.

¿Qué hace la propiedad order?

La propiedad order controla el orden visual de los ítems flex sin cambiar el orden del DOM. Los ítems con un valor de order menor aparecen primero. El valor predeterminado es 0.

¿Cómo copio el CSS generado?

Hay dos botones de copia: uno para el CSS del contenedor y otro para todo el CSS. Haz clic en cualquier botón 'Copiar CSS' para copiar el código al portapapeles.