Preskoči na glavno vsebino
LibraTool logoLibraTool

Generator CSS Flexbox — brezplačno

Poskušite z flex smerjo, zavitkem, justificiranjem in poravnavo na živih predmetih — in kopirajte CSS.

Deluje brez povezave po nalaganju
Prednastavitve

Nasvet: kliknite predmet v predogledu, da preklopite flex-grow: 1 nanj.

Predogled v ž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>

🔒 Vse se izvaja v brskalnik — nič se ne napiše.

Kako deluje

Interaktivno igrišče flexbox: preklapljajte flex-direction, wrap, justify-content in align-items ter opazujte, kako se do 10 živih elementov takoj preuredi. Kliknite kateri koli element, da mu date flex-grow: 1, in poglejte, kako si prisvoji prostor. CSS se posodablja v živo, pripravljen za kopiranje v vaš projekt.

  1. 1
    Nastavite vsebnik
    Smer, prelom, justify-content, align-items, razmik.
  2. 2
    Dodajte elemente
    Eden do deset oštevilčenih elementov flex.
  3. 3
    Eksperimentirajte
    Kliknite element za preklop flex-grow in poglejte učinek.
  4. 4
    Kopirajte CSS
    Pravila vsebnika (in elementa), pripravljena za lepljenje.

Vse teče v vašem brskalniku — nič se ne naloži.

Sorodna orodja

🟦

Generator CSS Grid

Vizuelno oblikujte CSS mrežo — sledenje, enote in vrzeli — in kopirajte generirani CSS in HTML.

Poskusite
🌈

Generator prehodov CSS

Ustvarite linearne, radialne in konične prehode CSS z živim predogledom. Kopirajte CSS z enim klikom.

Poskusite
🎨

Generator senčenja polj CSS

Vizualni gradnik za CSS box-shadow z živim predogledom, večplastnim zlaganjem, izbiralnikom barv, preklopo vstavka in kopiranjem z enim klikom. Vključuje prednastavitve Material, neumorfizma in sijaja.

Poskusite

Pogosto zastavljena vprašanja