Šiandienos pamokoje nagrinėsime įdomią užduotį, susijusią su " Flexbox" "tvarkos" tema. Sužinosite, kaip dviem skirtingais būdais pertvarkyti elementų eiliškumą " Flexbox" konteineryje. Naudosime metodus su CSS klasėmis, taip pat flexbox savybę flex-direction. Šio vadovo pabaigoje gebėsite ne tik suprasti elementų tvarką, bet ir efektyviai ją įgyvendinti. Pradėkime!
Pagrindinės žinios
- Flex elementų eiliškumą galite keisti naudodami savybę order.
- Alternatyvus elementų eiliškumo nustatymo būdas yra savybė flex-direction, kuri leidžia nurodyti eiliškumą.
Žingsnis po žingsnio
Norėdami pakeisti turinio tvarką flex konteineryje, pirmiausia sukuriame paprastą maketą. Tam galite paimti HTML dokumentą, kuriame yra penki div elementai, kurių eiliškumą norime pakeisti. Skaičiai div elementuose reiškia esamą tvarką nuo 5 iki 1.
Atlikdami pirmąjį žingsnį atidarykite HTML failą ir įterpkite struktūrą. Div elementai turėtų būti pažymėti klasėmis L1, L2, L3, L4 ir L5.
Dabar, kai nustatėte pagrindinę struktūrą, norime įsitikinti, kad pradinė elementų tvarka yra iš kairės į dešinę nuo 5 iki 1. Tikslas - rodyti elementus didėjančia tvarka nuo 1 iki 5.
Kad tai pasiektumėte, kiekvienam elementui naudokite CSS savybę order. Pradėkite nustatydami order reikšmes taip, kad L1 eilės tvarka būtų 5, L2 - 4 ir taip toliau, kol L5 bus 1.
Jei išsaugosite pakeitimus naršyklėje ir iš naujo įkelsite puslapį, elementai dabar turėtų būti išdėstyti tinkama tvarka nuo 1 iki 5.
Tačiau, kaip jau minėta, yra du būdai, kaip išspręsti šį uždavinį. Pirmasis būdas - naudoti pirmiau aprašytą užsakymo savybę. Antrasis būdas, kurį dabar apžvelgsime, naudoja savybę flex-direction.
Norėdami ištirti kitas galimybes, pirmiausia CSS faile komentuokite eiliškumo savybę, kad galėtume išbandyti naująjį metodą, neprarasdami ankstesniojo.
Dabar konteineriui galite naudoti flex-direction savybę. Pagal numatytuosius nustatymus ji nustatyta į eilutę. Pakeisime ją į row-reverse, todėl elementų tvarka turėtų būti apversta.
Pakeitę flex-direction į row-reverse, dar kartą išsaugokite failą ir įkelkite peržiūrą naršyklėje. Dabar turėtumėte matyti elementus teisinga tvarka nuo 1 iki 5, nenaudodami savybės order.
Kitas pavyzdys, kurį galite išbandyti, yra naudoti column-reverse (stulpelio kryptis atvirkščiai) elementams išdėstyti vertikaliai. Taip išdėstymas surūšiuojamas iš apačios į viršų.
Dabar turėtumėte aiškiai suprasti du flex elementų eilės tvarkos keitimo būdus: savybę order ir savybę flex-direction. Abu metodai siūlo skirtingus būdus, kaip pritaikyti turinio rodymą.
Apibendrinimas
Šiame vadove sužinojote, kaip valdyti elementų eiliškumą flex konteineryje. Dabar žinote, kaip naudoti savybę order ir kaip pritaikyti savybę flex-direction, kad pakeistumėte elementų rodymą horizontaliai ir vertikaliai. Eksperimentuokite su šiais metodais, kad geriau suprastumėte flexbox išdėstymą.
Dažniausiai užduodami klausimai
Kaip pakeisti flex elementų eiliškumą naudojant savybę order?Kiekvienam elementui galite priskirti savybę order ir nustatyti reikšmes, kad jie būtų rodomi norima tvarka.
Ar yra būdas pakeisti tvarką be eilės?Taip, norėdami pakeisti tvarką, galite nustatyti flex savybės kryptis eilutę-atvirkščiai arba stulpelį-atvirkščiai reikšmę.
Kurį iš šių dviejų būdų geriau naudoti,priklauso nuo konkrečių jūsų reikalavimų ir norimos išdėstymo strategijos. Abu metodai yra veiksmingi.
