Käesolevas juhendis käsitleme huvitavat harjutust teemal "Järjekord" Flexboxis. Sa õpid, kuidas saad ümberkorraldada elementide järjekorda Flex-containeris kahel erineval viisil. Kasutame lähenemisi CSS klasside ja Flexboxi omaduse flex-direction abil. Selle juhendi lõpus oled võimeline mitte ainult mõistma elementide järjekorda, vaid ka seda efektiivselt rakendama. Alustame!
Olulisemad järeldused
- Sa saad muuta Flex-elementide järjekorda order-omaduse abil.
- Elementide järjestamiseks alternatiivne meetod pakub flex-direction omadus, mis võimaldab määrata järjekorra.
Samm-sammuline juhend
Elementide sisu järjekorra muutmiseks Flex-containeris loome esmalt lihtsa paigutuse. Võid võtta HTML-dokumendi, kus on viis div-elementi, mida soovime ümber korraldada. Div-elementides olevad numbrid esindavad elementide praegust järjestust 5-st 1-ni.
Esimene samm on avada HTML-fail ja lisada struktuur. Div-elemente tuleks märgistada klassidega L1, L2, L3, L4 ja L5.
Pärast põhjastruktuuri määratlemist soovime tagada, et elementide algne järjekord vasakult paremale oleks 5-st 1-ni. Eesmärk on kuvada elemendid kasvavas järjekorras 1-st 5-ni.
Selleks kasuta oma CSS-is iga elemendi kohta order-omadust. Alusta order-väärtuste seadmist nii, et L1 saab järjekorra 5, L2 4, ja nii edasi kuni L5, mis omab järjekorra 1.
Järgmisena salvesta oma muudatused brauseris ja laadi leht uuesti ning peaksid nüüd nägema elemente õiges järjekorras 1-st 5-ni.
Siiski on, nagu juba mainitud, sellele ülesandele kaks lahendust. Esimene võimalus on kasutada eelloetletud order-omadust. Teine meetod, mida me nüüd uurime, kasutab flex-direction-omadust.
Teiste võimaluste uurimiseks kommenteeri kõigepealt oma CSS-failis order-omadused välja, et saaksime uut meetodit proovida, vanadest ilma jäämata.
Nüüd saad kasutada flex-direction-omadust konteineri jaoks. Vaikimisi on see seatud row'le. Muudame selle row-reverse'iks, mis peaks põhjustama elementide järjekorra pöördumise.
Pärast flex-direction'i muutmist row-reverse'iks salvesta uuesti oma fail ja laadi eelvaade brauseris. Peaksid nüüd nägema elemente õiges järjekorras 1-st 5-ni, ilma order-omadust kasutamata.
Üks näide, mida sa proovida saad, on kasutada column-reverse'i elementide vertikaalseks paigutamiseks. See pöörab paigutuse alt ülespoole.
Nüüd peaksid olema selgelt aru saanud kahe meetodi kohta Flex-elementide järjekorra muutmiseks: order-omadus ja flex-direction-omadus. Mõlemad meetodid pakuvad sulle erinevaid lähenemisi oma sisu kohandamiseks.
Kokkuvõte
Selles juhendis õppisid, kuidas saad manipuleerida elementide järjekorda Flex-Containeris. Sa tead nüüd, kuidas kasutada order-omadust ja kuidas kohandada flex-direction-omadust, et muuta elementide kuvamist nii horisontaalselt kui ka vertikaalselt. Katseta neid lähenemisi, et paremini mõista Flexboxi paigutusi.
Korduma kippuvad küsimused
Kuidas muuta Flex-elementide järjekorda order-omaduse abil?Sa saad määrata order-omaduse igale elemendile ja seada väärtused nii, et elemendid kuvatakse soovitud järjekorras.
Kas on võimalik muuta järjekorda ilma orderita?Jah, sa saad seada flex-direction-omaduse väärtuseks row-reverse või column-reverse, et muuta järjekorda.
Millist neist kahest meetodist on parem kasutada?See sõltub sinu konkreetsetest nõudmistest ja soovitud paigutusstrateegiast. Mõlemad meetodid on efektiivsed.
