CSS Flexbox playground

Haz clic en las propiedades de Flexbox y observa cómo los bloques se reorganizan en tiempo real — luego copia el CSS del contenedor. Una forma rápida de aprender flex y obtener el código exacto. Nada se envía a ningún lugar.

flex-direction

justify-content

align-items

flex-wrap

Espacio12px

Número de elementos5

Vista previa en vivo

CSS del contenedor

Todo funciona en tu navegador. Sin subidas, sin registro.

Cómo funciona

STEP 1

Elige tus propiedades

Toca flex-direction, justify-content, align-items y wrap. Arrastra el espacio y el número de elementos.

STEP 2

Observa la vista previa en vivo

Los bloques se reorganizan al instante para que veas exactamente qué hace cada propiedad de Flexbox.

STEP 3

Copia el CSS

Obtén el CSS limpio del contenedor con un clic, o descarga un archivo .css — nada se sube.