Leer en test Flexbox

Interactieve flexbox speeltuin om CSS flexbox eigenschappen te leren en te experimenteren.

Container eigenschappen

flex-direction

flex-wrap

justify-content

align-items

gap: 8px

Element eigenschappen

Element 1

grow

shrink

order

Element 2

grow

shrink

order

Element 3

grow

shrink

order

Voorbeeld

CSS Code

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

Hoe deze tool te gebruiken

1.Pas de container eigenschappen aan om te zien hoe elementen worden ingedeeld
2.Wijzig individuele eigenschappen zoals flex-grow en order
3.Kopieer de gegenereerde CSS voor container en elementen