← Todas las herramientas

Aprende y prueba Flexbox

Playground interactivo para aprender y experimentar con propiedades CSS flexbox.

Propiedades del contenedor

Propiedades de los elementos

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

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

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

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

Cómo usar esta herramienta

  • 1.Ajusta las propiedades del contenedor para ver cómo se disponen los elementos
  • 2.Modifica propiedades individuales como flex-grow y order
  • 3.Copia el CSS generado para el contenedor y los elementos