Kaj je CSS Flexbox?
CSS Flexbox (Flexible Box Layout) je enodimenzionalni model postavitve za porazdelitev prostora in poravnavo elementov v vrstici ali stolpcu. Flex vsebnik je definiran z display: flex, njegovi neposredni otroci pa postanejo flex elementi. Ključne lastnosti vsebnika: flex-direction (vrstica ali stolpec), flex-wrap (ena vs. več vrstic), justify-content (poravnava na glavni osi), align-items (poravnava na prečni osi na vrstico) in align-content (poravnava na prečni osi več vrstic). Ključne lastnosti elementa: flex-grow (koliko element raste), flex-shrink (koliko se skrči), flex-basis (začetna velikost) in align-self (preglasi align-items vsebnika za določen element). Flexbox je idealen za navigacijske vrstice, vrste kartic, osredinjene postavitve in vsako enodimenzionalno ureditev.
Kako uporabljati Generator CSS Flexbox
-
Prilagodite lastnosti vsebnika (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) z uporabo spustnih menijev in vnosnega polja.
-
Kliknite kateri koli element v predogledu, da ga izberete (postane oranžen).
-
Nastavite flex-grow, flex-shrink, flex-basis in align-self izbranega elementa v plošči elementov.
-
Kliknite '+ Dodaj element', da dodate več elementov; kliknite 'Odstrani', da izbrišete izbrani element.
-
Preklopite med zavihkoma CSS in HTML, da si ogledate generirano kodo, nato kliknite Kopiraj.
-
Kliknite 'Ponastavi vse', da začnete znova s privzeto postavitvijo s 3 elementi.