⭐ 0
🔍
Text Obrázek PDF a Dokumenty Audio Hudba Elektronika Čas Užitečné programy Validátory Ezoterika Hry

CSS Flexbox Generátor

Sestavte si CSS flexbox rozložení vizuálně: flex-direction, justify-content, align-items, flex-wrap a gap na kontejneru, plus pro každého potomka flex-grow, flex-shrink a flex-basis, vše s živým náhledem a CSS připraveným ke zkopírování.

🔒 Zpracováno výhradně ve vašem prohlížeči – nic, co zde zadáte, se nikdy nenahraje.

Zpracovává se... 0%

Výsledek

Flexbox rozložení má dvě oddělené sady pravidel – vlastnosti na kontejneru (flex-direction, justify-content, align-items, flex-wrap, gap) a vlastnosti na každém potomkovi (flex-grow, flex-shrink, flex-basis) – a jejich zaměňování je nejčastějším zdrojem chyb typu „proč se to necentruje / neroste / nezalamuje, jak očekávám“. Tento generátor zobrazuje obě sady pravidel najednou: změňte libovolné nastavení kontejneru nebo vlastní pole potomka a tři očíslované, barevně odlišené boxy se okamžitě aktualizují, takže příčina a následek zůstávají viditelné.

Strana kontejneru pokrývá každou osu rozložení: zvolte směr, rozhodněte, jak jsou potomci rozmístěni podél hlavní osy pomocí justify-content, zarovnejte je na příčné ose, určete, zda se zalamují na nové řádky, a nastavte mezeru místo okrajových triků mezi nimi. Strana potomka je stejně skutečná: přidejte až osm boxů, uberte na dva a dejte kterémukoliv z nich vlastní flex-grow, flex-shrink a flex-basis – generátor vypíše pravidlo CSS pro potomka, jen když se alespoň jedna z těchto hodnot liší od výchozího nastavení prohlížeče, takže zkopírovaný kód se nikdy nezaplácne flex-grow: 0 na boxech, které to nepotřebují.

Předpřipravené stránky skočí rovnou na rozložení, která lidé skutečně hledají podle názvu: jak vycentrovat div (nejčastěji kladená otázka na rozložení v CSS, vyřešená nastavením justify-content i align-items na center), navbar s logem vlevo a odkazy vpravo, stejně široké pružné sloupce pomocí flex-grow a srovnání space-between bok po boku s jeho blízkými příbuznými space-around a space-evenly.

Jako každý nástroj na tomto webu je generátor zdarma a běží celý ve vašem prohlížeči: žádné nahrávání, žádný účet, a po načtení stránky funguje i offline.

Líbí se vám tento nástroj? Přijde vám tento produkt užitečný? Vidíte v něm potenciál a chcete ho podpořit?

🛡️
Zpracováno v prohlížeči

Vaše soubory a vstupy nikdy neopustí toto zařízení. Zpracování probíhá zcela offline. 100% bezpečné.

Přijímané formáty a pravidla

  • Ovládání kontejneru: flex-direction, justify-content, align-items, flex-wrap a vstup pro gap v pixelech, aplikované živě na náhled.
  • Tři barevně odlišené boxy jako výchozí (přidejte až osm, uberte až na dva), každý s vlastními poli pro flex-grow, flex-shrink a flex-basis.
  • Kopírovatelný blok CSS s pravidlem .flex-container a jedním pravidlem .flex-item-N pro každého potomka, který má ne-výchozí vlastnosti flex.

Klíčové výhody

✓ Každé nastavení kontejneru a flex-grow, flex-shrink i flex-basis každého potomka se okamžitě projeví na třech očíslovaných náhledových boxech – přesně vidíte, co vaše flexbox pravidla dělají, ještě než sáhnete do stylesheetu.
✓ Generátor vypisuje jen pravidla potomků, která se liší od výchozích hodnot CSS, takže zkopírovaný kód zůstane krátký a čitelný, místo aby na každém boxu opakoval flex-grow: 0.
✓ Předpřipravené stránky řeší rozložení, která lidé hledají podle názvu: vycentrování divu, navbar s logem vlevo a odkazy vpravo a stejně široké pružné sloupce – otevřete je a nástroj už je nastavený.

Případy užití

  • • Získejte přesné CSS pro vycentrování divu horizontálně i vertikálně tím, že uvidíte fungování justify-content a align-items na živých náhledových boxech.
  • • Sestavte si layout navigace s logem vlevo a odkazy vpravo pomocí space-between a align-items: center a pak zkopírujte CSS kontejneru přímo do komponenty headeru.
  • • Porovnejte space-between, space-around a space-evenly vedle sebe na stejných třech boxech, místo abyste hádali, které rozložení odpovídá požadovanému rozmístění.