Přeskočit na hlavní obsah
LibraTool logoLibraTool

Generátor CSS Flexbox zdarma

Experimentujte se směrem flexu, zalamováním, justify a align na živých prvcích — a zkopírujte CSS.

Funguje offline po načtení
Předvolby

Tip: klikněte na prvek v náhledu a přepněte flex-grow: 1.

Náhled v reálném č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šechno běží v prohlížeči — nic se neodesílá.

Jak to funguje

Interaktivní hřiště flexboxu: přepínejte flex-direction, wrap, justify-content a align-items a sledujte, jak se okamžitě přeuspořádá až 10 živých prvků. Kliknutím na kterýkoli prvek mu dáte flex-grow: 1 a uvidíte, jak zabírá prostor. CSS se aktualizuje živě, připravené ke zkopírování do vašeho projektu.

  1. 1
    Nastavte kontejner
    Směr, zalamování, justify-content, align-items, mezera.
  2. 2
    Přidejte prvky
    Jeden až deset číslovaných flex prvků.
  3. 3
    Experimentujte
    Kliknutím na prvek přepnete flex-grow a uvidíte efekt.
  4. 4
    Zkopírujte CSS
    Pravidla kontejneru (a prvku), připravená ke vložení.

Vše běží ve vašem prohlížeči — nic se nenahrává.

Související nástroje

🟦

Generátor CSS Grid

Vizuálně navrhněte CSS grid — stopy, jednotky a mezery — a zkopírujte vygenerovaný CSS a HTML.

Vyzkoušet
🌈

Generátor CSS přechodů

Vytvářejte lineární, radiální a kuželové CSS přechody s živým náhledem. Zkopírujte CSS jedním kliknutím.

Vyzkoušet
🎨

Generátor CSS stínu rámečku

Vizuální nástroj pro CSS box-shadow s živým náhledem, vícevrstvým skládáním, výběrem barev, přepínačem vnitřního stínu a kopírováním jedním kliknutím. Zahrnuje přednastavení Material, neumorphism a záři.

Vyzkoušet

Časté dotazy