Čo je CSS Flexbox?
CSS Flexbox (Flexible Box Layout) je jednorozmerný model rozloženia na rozdeľovanie priestoru a zarovnávanie položiek v rade alebo stĺpci. Flex kontajner je definovaný pomocou display: flex a jeho priame deti sa stávajú flex položkami. Kľúčové vlastnosti kontajnera: flex-direction (rad alebo stĺpec), flex-wrap (jeden vs. viac riadkov), justify-content (zarovnanie na hlavnej osi), align-items (zarovnanie na priečnej osi pre každý riadok) a align-content (zarovnanie na priečnej osi viacerých riadkov). Kľúčové vlastnosti položky: flex-grow (ako veľmi položka rastie), flex-shrink (ako veľmi sa zmenšuje), flex-basis (počiatočná veľkosť) a align-self (prepíše align-items kontajnera pre konkrétnu položku). Flexbox je ideálny pre navigačné lišty, rady kariet, centrované rozloženia a akékoľvek jednorozmerné usporiadanie.
Ako používať Generátor CSS Flexbox
-
Upravte vlastnosti kontajnera (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) pomocou rozbaľovacích ponúk a vstupného poľa.
-
Kliknite na ľubovoľnú položku v náhľade, aby ste ju vybrali (stane sa oranžovou).
-
Nastavte flex-grow, flex-shrink, flex-basis a align-self vybranej položky v paneli položky.
-
Kliknite na '+ Pridať položku', aby ste pridali ďalšie položky; kliknite na 'Odstrániť', aby ste vymazali vybranú položku.
-
Prepínajte medzi záložkami CSS a HTML, aby ste videli vygenerovaný kód, potom kliknite na Kopírovať.
-
Kliknite na 'Obnoviť všetko', aby ste začali odznova s predvoleným rozložením 3 položiek.