← Tutti gli strumenti

Impara e testa Flexbox

Playground interattivo per imparare e sperimentare con le proprietà CSS flexbox.

Proprietà contenitore

Proprietà elementi

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;
}

Come usare questo strumento

  • 1.Regola le proprietà del contenitore per vedere come sono disposti gli elementi
  • 2.Modifica le proprietà individuali come flex-grow e order
  • 3.Copia il CSS generato per contenitore ed elementi