Vizuální návrh CSS Flexboxu
Nástroj Generátor Flexboxu umožňuje uživatelům vizuálně nastavit flex kontejner a jeho jednotlivé položky. Pomocí ovládacích prvků v rozhraní definujete parametry rozvržení, okamžitě sledujete provedené změny v živém náhledu a následně si zkopírujete vygenerovaný CSS kód pro svůj vlastní webový design.
Tento nástroj je ideální pro každého, kdo:
- chce vizuálním způsobem navrhnout rozvržení CSS flexboxu,
- potřebuje rychle vygenerovat CSS kód pro flex kontejner a jeho položky,
- si přeje lépe porozumět vlivu různých vlastností flexboxu na výsledný layout,
- vytváří běžné typy rozvržení, jako je vycentrovat prvek, navigační lišta, sloupec nad sebou, karty nebo boční panel.
Nastavení vlastností flex kontejneru
Kontejner je základním prvkem flexboxu, který určuje chování všech prvků uvnitř. V generátoru můžete ovlivnit následující vlastnosti kontejneru:
- Směr (direction): Určuje směr hlavní osy. Na výběr jsou hodnoty Řádek (row), Obrácený řádek, Sloupec (column) a Obrácený sloupec. Přepnutím směru z řádku na sloupec dojde k prohození hlavní a příčné osy, což přímo ovlivňuje fungování vlastností Zarovnání obsahu (justify-content) a Zarovnání položek (align-items).
- Zalamování (wrap): Definuje, zda mají být položky nuceny zůstat na jednom řádku, nebo se mohou zalamovat. Možnosti zahrnují Nezalamovat, Zalamovat a Obrácené zalamování. Pokud je zalamování vypnuté, všechny položky jsou natlačeny na jeden jediný řádek. Při zapnutém zalamování se položky, které se již nevejdou, přesunou na další řádek.
- Zarovnání obsahu (justify-content): Určuje rozložení položek podél hlavní osy. K dispozici jsou volby Na začátek, Na konec, Na střed, Mezi položky (space-between), Rovnoměrně kolem (space-around) a Stejnoměrně (space-evenly).
- Zarovnání položek (align-items): Nastavuje zarovnání položek na příčné ose. Můžete zvolit Na začátek, Na konec, Na střed, Roztáhnout (stretch) nebo Na účaří (baseline).
- Zarovnání obsahu (align-content): Tato vlastnost určuje prostor mezi řádky jako celek, pokud se položky zalamují na více řádků. Nabízí možnosti Na začátek, Na konec, Na střed, Roztáhnout (stretch), Mezi položky (space-between), Rovnoměrně kolem (space-around) a Stejnoměrně (space-evenly).
- Mezera (gap): Číselná hodnota, která definuje prostor mezi jednotlivými položkami a mezi řádky.
Nastavení vlastností jednotlivých položek
Kromě chování celého kontejneru můžete v nástroji upravovat také vlastnosti konkrétních položek. Po kliknutí na tlačítko „Přidat položku“ se v rozhraní objeví nová položka (například „Položka 5“). Pro každou položku lze individuálně nastavit:
- Pořadí (order): Číselná hodnota určující pořadí vykreslení položky.
- Zvětšení (grow): Číselná hodnota definující schopnost položky zvětšit se a vyplnit volné místo.
- Zmenšení (shrink): Číselná hodnota určující, jak moc se položka může zmenšit při nedostatku místa.
- Základ (basis): Výchozí velikost položky před rozdělením zbývajícího prostoru, kterou lze zadat jako číselnou hodnotu nebo zvolit Automatický základ (auto).
- Vlastní zarovnání (align-self): Umožňuje přepsat výchozí zarovnání kontejneru pro tuto konkrétní položku. Možnosti jsou Automaticky, Na začátek, Na konec, Na střed, Roztáhnout (stretch) a Na účaří (baseline).
Generování CSS kódu a chování prvků
Nástroj v reálném čase zobrazuje živý vizuální náhled celého flexbox layoutu. Souběžně s tím generuje čistý CSS kód pro flex kontejner a jeho položky.
Při generování kódu platí pravidlo, že vlastní CSS pravidla se vygenerují pouze pro ty položky, u kterých došlo ke změně jejich výchozích vlastností. Jakmile jste s výsledkem spokojeni, kliknutím na tlačítko „Kopírovat CSS“ uložíte kód do schránky, přičemž stav tlačítka se vizuálně změní na „Kopírováno“.
Ochrana soukromí při práci s nástrojem
Při používání Generátoru Flexboxu nemusíte mít obavy o bezpečnost svých dat. Celý layout se sestavuje přímo ve vašem prohlížeči. Nic z toho, co v nástroji nastavíte, se neodesílá na servery BroBroGo.
Často kladené otázky (FAQ)
Jaký je rozdíl mezi justify-content a align-items?
Vlastnost justify-content rozmísťuje položky podél hlavní osy – tedy ve směru, kterým teče řádek nebo sloupec – zatímco align-items je umisťuje napříč druhou osou. Přepněte směr z řádku (row) na sloupec (column) a obě osy se prohodí, takže justify-content začne fungovat shora dolů a align-items zleva doprava.
Jak funguje nastavení pro jednotlivé položky?
Vyberte položku podle jejího čísla a poté nastavte, jak moc se má zvětšit (grow) pro vyplnění volného místa, jak moc se má zmenšit (shrink) při nedostatku místa, její výchozí velikost (basis) a její vlastní zarovnání na příčné ose. Vlastnost order přesune položku na obrazovce dříve nebo později bez zásahu do HTML. Pouze položky, které skutečně změníte, získají v CSS vlastní pravidlo.
Kdy hrají roli vlastnosti wrap a align-content?
Při vypnutém zalamování (wrap) jsou všechny položky nuceny zůstat na jednom řádku a mohou se stlačit. Zapněte jej a položky, které se již nevejdou, se přesunou na další řádek – v tu chvíli přebírá roli align-content, která rozmísťuje řádky jako celek. Vlastnost gap nastavuje prostor mezi položkami a mezi řádky bez nutnosti používat vnější okraje (margin).