Generátor Flexbox
Živý náhled
Proč používat vizuální generátor Flexbox?
CSS Flexbox má mnoho vzájemně interagujících vlastností a kombinace mohou být složité. S naším vizuálním generátorem můžete nastavovat každou vlastnost pomocí rozbalovacích nabídek a vidět rozložení aktualizované v reálném čase.
Živý náhled
Vidíte přesně, co Flexbox rozložení při každé změně vlastnosti dělá — bez hádat
Všechny vlastnosti
flex-direction, justify-content, align-items, flex-wrap a gap v jednom rozhraní
CSS připravené k použití
Kopírujte čistý blok .container {} CSS přímo do stylopisu
Vytvoření Flexbox rozložení
Nastavte směr a zalamování
Vyberte flex-direction (řádek/sloupec) a flex-wrap pro ovládání hlavní osy a přetékání
Nastavte zarovnání prvků
Nastavte justify-content a align-items pro ovládání distribuce a zarovnání prvků
Zkopírujte CSS
Klikněte 'Kopírovat CSS' pro získání kompletního bloku .container CSS připraveného k použití
Případy použití Flexbox
Navigační panel
Flexbox je ideální pro horizontální navigační panely s justifyContent:space-between pro logo+odkazy
Mřížka karet
Vytvořte responsivní mřížku karet s flex-wrap:wrap a pevným flex-basis
Dokonalé centrování
justifyContent:center + alignItems:center — nejjednodušší způsob centrování prvku
Rozložení formuláře
Zarovnejte popisky a pole formuláře horizontálně nebo vertikálně pro čisté formuláře s Flexbox
Nejlepší postupy pro Flexbox
✓ Pochopte hlavní a příčnou osu
justify-content ovládá hlavní osu (řádek=horizontální). align-items ovládá příčnou osu. Mění se při použití flex-direction:column.
✓ Používejte flex:1 pro expandující prvky
Přidejte flex:1 k flex prvku pro jeho rozšíření a vyplnění dostupného prostoru.
✓ Používejte gap místo okrajů
Vlastnost gap vytváří rovnoměrné mezery mezi flex prvky bez přidávání okrajů na vnější hrany.
✓ Pro 2D rozložení používejte Grid
Flexbox ovládá jednu osu najednou. Pro dvourozměrná rozložení používejte CSS Grid.
❓ Nejčastější dotazy
Kdy používat Flexbox místo CSS Grid?
Flexbox je ideální pro jednorozměrná rozložení (navigační panely, skupiny tlačítek, řádky formulářů). CSS Grid exceluje v dvourozměrných rozložení, kde řídíte řádky a sloupce současně.
Co je flex-wrap:wrap?
Flex prvky jsou ve výchozím stavu nuceny do jednoho řádku i při přetékání. flex-wrap:wrap umožňuje prvkům přejít na další řádek při přetékání — důležité pro responsivní rozložení.
Jaký je rozdíl mezi align-items a align-content?
align-items zarovnává flex prvky na jednom řádku. align-content platí pouze při více řádcích (flex-wrap:wrap) a řídí distribuci řádků v kontejneru.
Jak vytvořit stejně široké sloupce s Flexbox?
Aplikujte flex:1 na každý prvek. Rozšíří je tak, aby rovnoměrně vyplnily dostupný prostor. Použijte flex:0 0 33,33% pro přesně 3 stejné sloupce bez ohledu na obsah.