Przejdź do głównej treści
LibraTool logoLibraTool

Generator flexbox CSS za darmo

Eksperymentuj z kierunkiem flex, zawijaniem, justify i align na elementach na żywo — i skopiuj CSS.

Działa offline po wczytaniu
Ustawienia wstępne

Wskazówka: kliknij element w podglądzie, aby przełączyć flex-grow: 1 na nim.

Podgląd na żywo
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 Wszystko działa w przeglądarce — nic nie jest przesyłane.

Jak to działa

Interaktywny plac zabaw flexbox: przełączaj flex-direction, wrap, justify-content i align-items i obserwuj, jak do 10 elementów na żywo natychmiast się przestawia. Kliknij dowolny element, aby nadać mu flex-grow: 1 i zobaczyć, jak zajmuje przestrzeń. CSS aktualizuje się na żywo, gotowy do skopiowania do projektu.

  1. 1
    Ustaw kontener
    Kierunek, zawijanie, justify-content, align-items, odstęp.
  2. 2
    Dodaj elementy
    Od jednego do dziesięciu numerowanych elementów flex.
  3. 3
    Eksperymentuj
    Kliknij element, aby przełączyć flex-grow i zobaczyć efekt.
  4. 4
    Skopiuj CSS
    Reguły kontenera (i elementu), gotowe do wklejenia.

Wszystko działa w przeglądarce — nic nie jest przesyłane.

Powiązane narzędzia

🟦

Generator siatki CSS

Wizualnie zaprojektuj siatkę CSS — ścieżki, jednostki i przerwy — i skopiuj wygenerowany CSS i HTML.

Wypróbuj
🌈

Generator gradientów CSS

Twórz liniowe, radialne i stożkowe gradienty CSS z podglądem na żywo. Kopiuj CSS jednym kliknięciem.

Wypróbuj
🎨

Generator cienia CSS

Wizualny kreator CSS box-shadow z podglądem na żywo, wielowarstwowym układaniem, selektorem kolorów, przełącznikiem wewnętrznym i kopiowaniem jednym kliknięciem. Zawiera ustawienia wstępne Material, neumorfizm i poświata.

Wypróbuj

Często zadawane pytania