Co je CSS Flexbox?
CSS Flexbox (Flexible Box Layout) je jednorozměrný model rozvržení pro rozdělování prostoru a zarovnávání položek v řádku nebo sloupci. Flex kontejner je definován pomocí display: flex a jeho přímé potomky se stávají flex položkami. Klíčové vlastnosti kontejneru: flex-direction (řádek nebo sloupec), flex-wrap (jeden vs. více řádků), justify-content (zarovnání na hlavní ose), align-items (zarovnání na příčné ose pro každý řádek) a align-content (zarovnání na příčné ose více řádků). Klíčové vlastnosti položek: flex-grow (jak moc položka roste), flex-shrink (jak moc se zmenšuje), flex-basis (počáteční velikost) a align-self (přepisuje align-items kontejneru pro konkrétní položku). Flexbox je ideální pro navigační lišty, řady karet, centrovaná rozvržení a jakékoli jednorozměrné uspořádání.
Jak používat Generátor CSS Flexbox
-
Upravte vlastnosti kontejneru (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) pomocí rozbalovacích nabídek a vstupního pole.
-
Kliknutím na libovolnou položku v náhledu ji vyberte (zezelenoví oranžově).
-
Nastavte flex-grow, flex-shrink, flex-basis a align-self vybrané položky v panelu položky.
-
Kliknutím na '+ Přidat položku' přidáte další položky; kliknutím na 'Odebrat' odstraníte vybranou položku.
-
Přepínáte mezi záložkami CSS a HTML, abyste viděli vygenerovaný kód, poté klikněte na Kopírovat.
-
Kliknutím na 'Resetovat vše' začnete znovu s výchozím rozvržením se 3 položkami.