← Wszystkie narzędzia

Ucz się i testuj Flexbox

Interaktywny plac zabaw do nauki i eksperymentowania z właściwościami CSS flexbox.

Właściwości kontenera

Właściwości elementów

Element 1
Element 2
Element 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;
}

Jak używać tego narzędzia

  • 1.Dostosuj właściwości kontenera, aby zobaczyć jak elementy są rozmieszczone
  • 2.Modyfikuj indywidualne właściwości jak flex-grow i order
  • 3.Skopiuj wygenerowany CSS dla kontenera i elementów