Generator za Flexbox
Nastavite flex vsebnik in njegove elemente z vizualnimi kontrolami, opazujte odziv postavitve v živo in kopirajte CSS z enim klikom.
Vaša postavitev se ustvari neposredno v vašem brskalniku. Nič od tega, kar nastavite tukaj, se ne prenaša na BroBroGo.
Pogosta vprašanja
Kakšna je razlika med justify-content in align-items?
Justify-content razporedi elemente vzdolž glavne osi — smeri, v kateri teče vrstica ali stolpec —, medtem ko jih align-items pozicionira prečno na drugo os. Če spremenite smer iz vrstice v stolpec, se osi zamenjata, tako da justify-content začne delovati od zgoraj navzdol, align-items pa od leve proti desni.
Kako delujejo nastavitve za posamezne elemente?
Izberite element po njegovi številki, nato pa nastavite, koliko se razširi (grow), da zapolni prosti prostor, koliko se skrči (shrink), ko je prostor omejen, njegovo začetno velikost (basis) in njegovo lastno prečno poravnavo. Vrstni red (order) premakne element prej ali pozneje na zaslonu, ne da bi spreminjal kodo HTML. Le elementi, ki jih dejansko spremenite, dobijo svoje pravilo v kodi CSS.
Kdaj sta pomembna wrap in align-content?
Ko je prelamljanje izklopljeno, so vsi elementi prisiljeni v eno vrstico in se lahko stisnejo. Ko ga vklopite, se elementi, ki ne ustrezajo več, premaknejo v naslednjo vrstico — takrat nastopi align-content, ki razporedi vrstice kot skupino. Gap določa razmik med elementi in med vrsticami brez uporabe marginov.