Pomembno je, da je uporabniški vmesnik intuitiven in privlačen oblikovan. Eden od načinov, kako to doseči, je uporaba Flexbox v CSS-u. S Flexboxom lahko nadzoruješ ne le poravnavo in razporeditev elementov v postavitvi, temveč tudi spremeniš vidnost in zaporedje elementov, ne da bi pri tem vplival na DOM (Document Object Model). V tem Navodilu si bomo podrobneje ogledali CSS lastnost order, ki ti omogoča spreminjanje zaporedja elementov Flexboxa, ter uporabo flex-direction za enostavno obrnitev prikazanega zaporedja elementov.
Najpomembnejše ugotovitve
- Lastnost CSS order vpliva na vidno zaporedje elementov Flexboxa.
- Spremembe v zaporedju order ne vplivajo na prvotno zaporedje v DOM.
- Smer Flexboxa je mogoče obrniti z uporabo flex-direction (npr. row-reverse), da se spremeni prikazno zaporedje elementov.
Korak za korakom vodilo
Za prikaz delovanja lastnosti order in možnost obrnitve prikaza z uporabo flex-direction, bomo sledili naslednjim korakom:
1. Ustvarjanje osnov Flexboxa
Najprej se prepričaj, da tvoj kontejner ima lastnosti Flexboxa. Za to uporabi CSS pravilo display: flex; na svojem kontejnerju.
2. Razumevanje zaporedja elementov v DOM
Preglej originalno zaporedje elementov v svojem DOM. Pomembno je vedeti, da je standardno zaporedje v DOM osnovna postavka, na kateri temelji Flexbox-Order.
3. Uporaba lastnosti Order
Za vpliv na prikaz elementov nastavi lastnost order na negativne vrednosti. Privzeto imajo elementi vrednost 0. Če dodeliš elementu vrednost -1, bo vizualno potegnjen naprej.
4. Uporaba vizualne razvrstitve
Če želiš prilagoditi prvi element vizualno, upoštevaj naslednje: Privzeta vrednost lastnosti order je 0. Za prikaz enega elementa pred drugim, izberi manjšo vrednost. Dodelitve kot -1, -2 ali celo negativne stotine so mogoče.
5. Izvajanje dodatnih prilagoditev
Spremeni vrednosti order za preostale elemente. Na primer, če želiš imeti drugi element na prvem mestu, ga označi z -1 ali mu dodeli vrednost manjšo od trenutne vrednosti order.
6. Uporaba negativne vrednosti Order
Ko uporabiš lastnost order za spremembo vrstnega reda, bo vizualni vrstni red razvrščen naraščajoče, pri čemer bo najmanjša vrednost prikazana najprej.
7. Obrniti smer Flex-Direction
Eden najmočnejših orodij je lastnost flex-direction. Če jo nastaviš na row-reverse, se bo zaporedje spremenilo v prikaz z desne na levo. Preveri, kako se elementi vizualno razvrstijo ob tej spremembi.
8. Sprememba Order v obratni smeri
Če uporabiš flex-direction: column;, bo postavitev oblikovana od zgoraj navzdol. Negativno order lastnosti se lahko v tem primeru prav tako uporabi za vpliv na vrstni red.
9. Uporaba pri bralnikih zaslonov
Če želiš upoštevati vizualni vrstni red pri bralnikih zaslonov, je pomembno vedeti, da bralniki zaslonov preberejo prvotno zaporedje DOM. Zato vizualne spremembe z order niso dostopne vsem uporabnikom.
Povzetek
V tej vadnici ste se naučili, kako uporabiti CSS lastnost order za nadzor vidnosti in vrstnega reda elementov v Flexboxu. Poleg tega ste ugotovili, kako lahko obrnete prikaz s flex-direction, da bi bolj prilagodljivo in prijazno uporabniško izkušnjo oblikovali. Pomembno je vedeti, da vizualne prilagoditve prikaza ne spremenijo osnovnega vrstnega reda DOM, kar je treba upoštevati pri dostopnosti.
Pogosto zastavljena vprašanja
Kako deluje lastnost order?Lastnost order vpliva na vidni vrstni red elementov Flexboxa. Nižja vrednost se prikaže najprej.
Kako lahko obrnem smer flex-direction?Nastavite lastnost flex-direction na row-reverse ali column-reverse, da spremenite vrstni red prikaza.
Ali lastnost order vpliva na vrstni red DOM?Ne, lastnost order spreminja le vizualni prikaz elementov, ne pa vrstnega reda v DOM.
Kaj se zgodi, če so vrednosti order enake?Če so vrednosti order enake, se uporabi prvotni vrstni red DOM za prikaz.
Kako naj ravnam s predvajalniki zaslona?Ker predvajalniki zaslona berejo vrstni red DOM, poskrbite, da bo vizualna postavitev ostala dostopna za vse uporabnike.
