LibraTool logoLibraTool

Besplatan CSS Flexbox generator

Eksperimentišite sa smjerom fleksa, prelamanjem, poravnanjem elemenata uživo — i kopirajte CSS.

Radi offline nakon učitavanja
Predefinisano

Savjet: kliknite na element u pregledu da uključite/isključite flex-grow: 1 na njemu.

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 odvija u vašem pregledniku — ništa se ne šalje na server.

Kako radi

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

  1. 1
    Postavite kontejner
    Smjer, wrap, justify-content, align-items, razmak.
  2. 2
    Dodajte elemente
    Od jedan do deset numerisanih flex elemenata.
  3. 3
    Eksperimentišite
    Kliknite element da uključite/isključite flex-grow i vidite efekat.
  4. 4
    Kopirajte CSS
    Pravila kontejnera (i elemenata), spremna za lijepljenje.

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

Povezani alati

🟦

CSS Grid generator

Vizuelno kreirajte CSS grid — trake, jedinice i razmake — i kopirajte generirani CSS i HTML.

Probaj
🎨

Generator CSS box-shadow sjene

Vizuelni alat za CSS box-shadow uz prikaz uživo, slaganje više slojeva, birač boja, prekidač za inset i kopiranje jednim klikom. Uključuje predloške Material, neumorphism i sjaj.

Probaj
◖

Generator CSS border-radius zaobljenja

Vizuelno dizajnirajte zaobljene uglove s nezavisnom kontrolom svakog ugla. Podržava eliptičnu X/Y sintaksu za organske oblike.

Probaj

Često postavljana pitanja