Preskoči na glavni sadržaj
LibraTool logoLibraTool

CSS Flexbox generator — besplatno

Eksperimentirajte sa flex smjerom, zamatanjem, poravnavanjem i rastezanjem na Live stavkama — i kopirajte CSS.

Radi offline nakon učitavanja
Predlošci

Savjet: kliknite na stavku u pregledniku da prebacite flex-grow: 1 na nju.

Uživi pregled
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 pregledniku — ništa se ne učitava na server.

Kako funkcionira

Interaktivno igralište za flexbox: prebacite flex-direction, wrap, justify-content i align-items i gledajte kako se do 10 stavki uživo trenutačno raspoređuje. Kliknite bilo koju stavku da joj dodijelite flex-grow: 1 i pogledajte kako zauzima prostor. CSS se ažurira uživo, spreman za kopiranje u vaš projekt.

  1. 1
    Postavite spremnik
    Smjer, wrap, justify-content, align-items, razmak.
  2. 2
    Dodajte stavke
    Od jedne do deset numeriranih flex stavki.
  3. 3
    Eksperimentirajte
    Kliknite stavku da prebacite flex-grow i pogledate efekt.
  4. 4
    Kopirajte CSS
    Pravila spremnika (i stavke), spremna za lijepljenje.

Sve radi u vašem pregledniku — ništa se ne šalje.

Srodni alati

🟦

CSS Grid generator

Vizualno kreirajte CSS grid — tragove, jedinice i razmake — i kopirajte generirani CSS i HTML.

Isprobajte
🌈

Generator CSS gradijenata

Kreirajte linearne, radijalne i konične CSS gradijente s živim pregledom. Kopirajte CSS jednim klikom.

Isprobajte
🎨

Generator CSS box-shadow

Vizualni alat za CSS box-shadow s živim pregledom, slaganjem više slojeva, biranjem boje, umetnutim preklopnim gumbom i kopiranjem jednim klikom. Uključuje Material, neumorfizam i sjajne predloške.

Isprobajte

Često postavljana pitanja