Pređi na glavni sadržaj
LibraTool logoLibraTool

CSS Flexbox generator — besplatno

Eksperimentišite sa smerom, prelamanjem, raspodelom i poravnanjem stavki uživo — i kopirajte CSS.

Radi van mreže kada se učita
Predlošci

Savet: kliknite na stavku u pregledu da uključite/isključite flex-grow: 1 na njoj.

Pregled uživo
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>

🔒 Sve se izvršava u vašem pretraživaču — ništa se ne otprema.

Kako funkcioniše

Interaktivno igralište za flexbox: prebacujte flex-direction, wrap, justify-content i align-items i posmatrajte kako se do 10 stavki uživo preraspoređuje trenutno. Kliknite na bilo koju stavku da joj date flex-grow: 1 i vidite kako zauzima prostor. CSS se ažurira uživo, spreman za kopiranje u vaš projekat.

  1. 1
    Podesite kontejner
    Pravac, wrap, justify-content, align-items, razmak.
  2. 2
    Dodajte stavke
    Od jedne do deset numerisanih flex stavki.
  3. 3
    Eksperimentišite
    Kliknite na stavku da uključite flex-grow i vidite efekat.
  4. 4
    Kopirajte CSS
    Pravila kontejnera (i stavki), spremna za lepljenje.

Sve se izvršava u vašem pregledaču — ništa se ne otprema.

Slične alatke

🟦

CSS Grid generator

Vizuelno dizajnirajte CSS mrežu — trake, jedinice i razmake — i kopirajte generisani CSS i HTML.

Isprobajte
🌈

Generator CSS gradijenta

Kreirajte linearne, radijalne i konične CSS gradijente sa pregledom uživo. Kopirajte CSS jednim klikom.

Isprobajte
🎨

Generator CSS box-shadow efekta

Vizuelni alat za CSS box-shadow sa pregledom uživo, slaganjem više slojeva, biranjem boje, prekidačem za unutrašnju senku i kopiranjem jednim klikom. Uključuje predloške Material, neumorfizma i sjaja.

Isprobajte

Česta pitanja