Flexbox Playground

Domina flexbox con controles visuales interactivos

Propiedades del Contenedor

Display

Dirección Flex

Flex Wrap

Justificar Contenido

Alinear Elementos

Alinear Contenido

Espacio

Espacio entre Columnas

Espacio entre Filas

Ancho del Contenedor

Altura Mínima

Relleno

Presets

Elementos

Vista Previa

Item 1

Item 2

Item 3

Eje Principal

Horizontal

Eje Transversal

Vertical

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