Što je CSS Flexbox?
CSS Flexbox (Flexible Box Layout) je jednodimenzionalni model rasporeda za raspodjelu prostora i poravnavanje stavki u retku ili stupcu. Flex kontejner se definira s display: flex, a njegova izravna djeca postaju flex stavke. Ključna svojstva kontejnera: flex-direction (redak ili stupac), flex-wrap (jedan red naspram više redova), justify-content (poravnanje na glavnoj osi), align-items (poravnanje na poprečnoj osi po retku) i align-content (poravnanje na poprečnoj osi više redova). Ključna svojstva stavki: flex-grow (koliko stavka raste), flex-shrink (koliko se skuplja), flex-basis (početna veličina) i align-self (nadjačava align-items kontejnera za određenu stavku). Flexbox je idealan za navigacijske trake, redove kartica, centralizirane rasporede i bilo koji jednodimenzionalni raspored.
Kako koristiti CSS Flexbox Generator
-
Podesite svojstva kontejnera (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) koristeći padajuće izbornike i polje za unos.
-
Kliknite na bilo koju stavku u pregledu da biste je odabrali (postaje narančasta).
-
Postavite flex-grow, flex-shrink, flex-basis i align-self odabrane stavke u panelu stavki.
-
Kliknite na '+ Dodaj stavku' za dodavanje stavki; kliknite na 'Ukloni' za brisanje odabrane stavke.
-
Prebacujte između kartica CSS i HTML da vidite generirani kod, a zatim kliknite na Kopiraj.
-
Kliknite na 'Poništi sve' za početak ispočetka s zadanim rasporedom od 3 stavke.