V današnjem navodilu se bomo ukvarjali z zanimivo vadbo na temo "Naročilo" v Flexbox-u. Naučil se boš, kako lahko v Flex vsebniku preurediš vrstni red elementov na dva različna načina. Raziskali bomo pristop s CSS razredi, pa tudi lastnost Flexboxa flex-direction. Po koncu tega navodila boš sposoben razumeti in učinkovito izvajati preureditev vrstnega reda elementov. Začnimo!
Najpomembnejše ugotovitve
- Vrstni red Flex elementov lahko spremeniš z uporabo lastnosti order.
- Alternativna metoda za razporeditev elementov je uporaba lastnosti flex-direction, ki omogoča določanje vrstnega reda.
Korak za korakom navodila
Za spremembo vrstnega reda vsebine v Flex vsebniku bomo najprej ustvarili preprost razpored. Lahko si vzameš HTML dokument, v katerem je pet div elementov, ki jih želimo preurediti. Številke v div elementih predstavljajo trenutni vrstni red od 5 do 1.
Za prvi korak odpreš svojo HTML datoteko in vstavi strukturo. Div elementi naj bodo označeni z razredi L1, L2, L3, L4 in L5.
Zdaj, ko si nastavil osnovno strukturo, želimo zagotoviti, da je izhodni vrstni red elementov od leve proti desni od 5 do 1. Cilj je prikazati elemente v naraščajočem vrstnem redu od 1 do 5.
Za dosego tega uporabi lastnost order v svojem CSS za vsak element. Začni z nastavljanjem vrednosti order tako, da L1 dobi vrstni red 5, L2 4, in tako naprej do L5, ki ima vrstni red 1.
Če svoje spremembe shraniš in stran ponovno naložiš v brskalniku, bi moral zdaj videti elemente v pravilnem vrstnem redu od 1 do 5.
Obstajata pa, kot že omenjeno, dva načina za reševanje tega problema. Prva možnost je uporaba prej omenjene lastnosti order. Druga metoda, ki jo bomo zdaj obravnavali, uporablja lastnost flex-direction.
Če želiš raziskati druge možnosti, najprej izkomentiraj lastnosti order v svoji CSS datoteki, da lahko preizkusimo novo metodo, ne da bi izgubili prejšnjo.
Zdaj lahko za vsebnik uporabiš lastnost flex-direction. Privzeto je nastavljena na vrstico (row). Spremenimo jo v vrstico v obratnem vrstnem redu (row-reverse), kar bi moralo povzročiti, da se vrstni red elementov obrne.
Po spremembi flex-direction v row-reverse ponovno shrani datoteko in naloži predogled v brskalniku. Sedaj bi moral videti elemente v pravilnem vrstnem redu od 1 do 5, brez potrebe po uporabi lastnosti order.
Še en primer, ki ga lahko preizkusiš, je uporaba column-reverse za vertikalno razporeditev elementov. Pri tem se postavitev ureja od spodaj navzgor.
Zdaj bi moral jasno razumeti obe metodi za spreminjanje vrstnega reda Flex elementov: lastnost order in lastnost flex-direction. Obe metodi ti omogočata različne pristope za prilagajanje prikaza vsebine.
Povzetek
V tem navodilu si se naučil, kako lahko manipuliraš vrstni red elementov v Flex vsebniku. Sedaj poznaš uporabo lastnosti order in kako prilagoditi lastnost flex-direction, da spremeniš prikaz elementov tako vodoravno kot navpično. Preizkusi te pristope, da razviješ boljše razumevanje Flexbox postavitev.
Pogosta vprašanja
Kako spremenim vrstni red Flex elementov z lastnostjo order?Posameznemu elementu lahko dodeliš lastnost order in določiš vrednosti, da se prikažejo v želenem vrstnem redu.
Ali obstaja način za spreminjanje vrstnega reda brez uporabe order?Da, lahko nastaviš lastnost flex-direction na row-reverse ali column-reverse, da spremeniš vrstni red.
Kateri od obeh načinov je boljši za uporabo?To je odvisno od tvojih specifičnih zahtev in želene postavitve. Obe metodi sta učinkoviti.
