CSS Flexbox Playground

Aprende CSS Flexbox con un playground interactivo. Ajusta propiedades visualmente, ve resultados al instante y copia el código CSS generado. Herramienta gratuita para desarrolladores.

Preajustes:

Propiedades del Contenedor

Dirección

Ajuste

Justificar Contenido

Alinear Elementos

Alinear Contenido

Espacio

16px

Elementos

Vista Previa

1 Item 1

2 Item 2

3 Item 3

4 Item 4

5 Item 5

CSS Generado

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