Preskočiť na hlavný obsah
LibraTool logoLibraTool

Generátor CSS Flexbox zadarmo

Experimentujte so smerom flex, zalomením, justifikáciou a zarovnaním na živých položkách — a skopírujte CSS.

Po načítaní funguje offline
Prednastavenia

Tip: kliknite na položku v náhľade, aby ste prepínali flex-grow: 1 na nej.

Náhľad v živom čase
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>

🔒 Všetko beží vo vašom prehliadači — nič sa nenahrávajúc.

Ako to funguje

Interaktívne ihrisko flexboxu: prepínajte flex-direction, wrap, justify-content a align-items a sledujte, ako sa až 10 živých prvkov okamžite preusporiada. Kliknutím na akýkoľvek prvok mu nastavíte flex-grow: 1 a uvidíte, ako si nárokuje priestor. CSS sa aktualizuje živo, pripravené na skopírovanie do vášho projektu.

  1. 1
    Nastavte kontajner
    Smer, zalamovanie, justify-content, align-items, medzera.
  2. 2
    Pridajte prvky
    Jeden až desať číslovaných flex prvkov.
  3. 3
    Experimentujte
    Kliknutím na prvok prepnete flex-grow a uvidíte efekt.
  4. 4
    Skopírujte CSS
    Pravidlá kontajnera (a prvku), pripravené na vloženie.

Všetko beží vo vašom prehliadači — nič sa nenahráva.

Súvisiace nástroje

🟦

Generátor CSS mriežky

Vizuálne navrhujte CSS mriežku — stopy, jednotky a medzery — a skopírujte vygenerovaný CSS a HTML.

Vyskúšajte
🌈

Generátor CSS prechodov

Vytvárajte lineárne, radiálne a kužeľové CSS prechody so živým náhľadom. Skopírujte CSS jedným kliknutím.

Vyskúšajte
🎨

Generátor CSS tieňa rámčeka

Vizuálny nástroj na tvorbu CSS box-shadow so živým náhľadom, vrstvením viacerých vrstiev, výberom farby, prepínačom vnorenia a kopírovaním jedným kliknutím. Zahŕňa prednastavenia Material, neumorfizmu a záre.

Vyskúšajte

Často kladené otázky