Generator za Flexbox

Uvod v CSS Flexbox in vizualno oblikovanje

CSS Flexbox (Flexible Box Layout) je model postavitve, namenjen urejanju elementov v enodimenzionalnem prostoru – bodisi v vrstici bodisi v stolpcu. Uporablja se za ustvarjanje prilagodljivih struktur, ki se dinamično odzivajo na velikost zaslona. Orodje Generator za Flexbox omogoča vizualno nastavljanje lastnosti flex vsebnika in njegovih elementov. Uporabnik spreminja kontrolne gumbe, opazuje spremembe v živo na zaslonu in nato kopira generirano kodo CSS za svojo postavitev.

Vizualni prikaz v živo pomaga pri razumevanju delovanja različnih lastnosti flexboxa, saj se vsaka sprememba takoj odrazi na postavitvi. To olajša učenje in pospeši razvoj spletnih strani.

Lastnosti flex vsebnika

Vsebnik (container) določa kontekst za vse svoje neposredne otroke. Z nastavitvijo lastnosti vsebnika določamo splošno smer in vedenje celotne skupine elementov:

• Smer (flex-direction): Določa glavno os postavitve. Možnosti so Vrstica (row), Obratna vrstica (row-reverse), Stolpec (column) in Obraten stolpec (column-reverse).
• Prelamljanje (flex-wrap): Določa, ali se elementi stisnejo v eno vrstico ali prelijejo v več vrstic. Na voljo so nastavitve Brez prelamljanja (nowrap), Prelomi (wrap) in Obratno prelamljanje (wrap-reverse).
• Poravnava vsebine (justify-content): Razporeja elemente vzdolž glavne osi. Izbirate lahko med Začetek (flex-start), Konec (flex-end), Sredina (center), Prostor vmes (space-between), Prostor okoli (space-around) in Enakomeren prostor (space-evenly).
• Poravnava elementov (align-items): Določa poravnavo elementov vzdolž prečne osi. Možnosti so Začetek (flex-start), Konec (flex-end), Sredina (center), Raztegni (stretch) in Izhodiščna črta (baseline).
• Poravnava vsebine (align-content): Poravnava vrstice vsebnika vzdolž prečne osi, ko je na voljo več vrstic. Možnosti vključujejo Začetek (flex-start), Konec (flex-end), Sredina (center), Raztegni (stretch), Prostor vmes (space-between), Prostor okoli (space-around) in Enakomeren prostor (space-evenly).
• Razmik (gap): Številčna vrednost, ki določa prazen prostor med posameznimi elementi in med vrsticami.

Delovanje osi in prelamljanje vsebine

Razmerje med glavnim in prečnim delovanjem določa smer vsebnika. Ko spremenite smer iz vrstice v stolpec, se glavna in prečna os zamenjata. To neposredno vpliva na delovanje lastnosti justify-content in align-items. Pri smeri Vrstica (row) justify-content upravlja vodoravno poravnavo, align-items pa navpično. Pri smeri Stolpec (column) se ta vlogi zamenjata.

Ko je prelamljanje izklopljeno (Brez prelamljanja (nowrap)), so vsi elementi prisiljeni ostati v eni vrstici, kar lahko povzroči njihovo stiskanje ali prelivanje izven vsebnika. Ko vklopite možnost Prelomi (wrap), se elementi, ki prostorsko ne ustrezajo več trenutni vrstici, samodejno premaknejo v novo vrstico. V tem primeru začne delovati lastnost align-content, ki določa razporeditev teh vrstic kot celote. Razmik (gap) pri tem določa enakomeren prostor med elementi in vrsticami brez potrebe po nastavljanju zunanjih robov (margin).

Lastnosti posameznih elementov

Vsak posamezen element znotraj vsebnika ima lahko lastne nastavitve, ki povozijo ali dopolnjujejo pravila vsebnika. Ko kliknete gumb Dodaj element, se v vsebniku pojavi nov element (npr. "Element 5"). Za vsak element lahko prilagodite naslednje parametre:

• Vrstni red (order): Številčna vrednost, ki spremeni vizualni vrstni red prikaza elementa na zaslonu, ne da bi spreminjala strukturo kode HTML.
• Rast (flex-grow): Številčna vrednost, ki določa, koliko se bo element razširil in zapolnil preostali prosti prostor v vsebniku.
• Krčenje (flex-shrink): Številčna vrednost, ki določa stopnjo krčenja elementa, ko je prostor v vsebniku omejen.
• Osnova (flex-basis): Začetna velikost elementa pred razporeditvijo preostalega prostora. Lahko je številčna vrednost ali Samodejna osnova (auto).
• Lastna poravnava (align-self): Omogoča posameznemu elementu, da preglasi splošno poravnavo align-items vsebnika. Možnosti so Samodejno (auto), Začetek (flex-start), Konec (flex-end), Sredina (center), Raztegni (stretch) in Izhodiščna črta (baseline).

Koda CSS se generira dinamično. Pomembno pravilo delovanja orodja je, da se lastna CSS pravila generirajo samo za tiste elemente, katerih privzete lastnosti ste dejansko spremenili.

Pogoste postavitve z uporabo prednastavitev

Orodje ponuja hitre prednastavitve za ustvarjanje standardnih spletnih struktur:

Zasebnost in obdelava podatkov

Uporaba orodja Generator za Flexbox je varna z vidika varovanja podatkov. Celotna postavitev se gradi in izračunava neposredno v vašem spletnem brskalniku. Noben podatek, ki ga vnesete ali nastavite v vmesniku, se ne prenaša na strežnik BroBroGo.

Ko končate z oblikovanjem, kliknite gumb Kopiraj CSS. Ob kliku se stanje gumba spremeni v "Copied", generirana koda pa se shrani v vašo odložišče.

Pogosta vprašanja (FAQ)

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.