"Flexbox" CSS: Kaip surūšiuoti elementus naudojant eiliškumą ir atvirkštinę kryptį

Svarbu, kad naudotojo sąsaja būtų intuityvi ir patraukli. Vienas iš būdų tai pasiekti - naudoti "Flexbox" CSS. Naudodami "Flexbox" galite ne tik valdyti elementų išlyginimą ir išdėstymą makete, bet ir keisti elementų matomumą ir tvarką nedarydami poveikio DOM (dokumento objektų modeliui ). Šioje pamokoje plačiau apžvelgsime CSS savybę order, kuri leidžia keisti flexbox elementų eiliškumą, taip pat flex-direction naudojimą, kad lengvai pakeistumėte elementų rodymo tvarką.

Pagrindinės išvados

• CSS savybės tvarka daro įtaką flexbox elementų rodymo tvarkai.
• Tvarkos sekos pakeitimai neturi įtakos pradinei sekai DOM.
• Flexbox kryptį galima pakeisti naudojant flex-direction (pvz., row-reverse) ir taip pakeisti rodymo tvarką.

Žingsnis po žingsnio

Norėdami pademonstruoti, kaip veikia eiliškumo savybė ir galimybę pakeisti rodymo eiliškumą naudojant flex-direction, atliksime šiuos veiksmus:

1. sukurkite flexbox pagrindus

Pirmiausia reikia įsitikinti, kad jūsų konteineris turi flexbox savybes. Norėdami tai padaryti, nustatykite savo konteineriui CSS taisyklę display: flex;.

2. Supraskite elementų tvarką DOM

Pažvelkite į pradinę elementų tvarką savo DOM. Svarbu žinoti, kad numatytoji tvarka DOM yra pradinis taškas, kuriuo remiantis nustatoma flexbox tvarka.

3. Naudokite savybę order

Norėdami daryti įtaką elementų rodymui, galite nustatyti neigiamas order savybės reikšmes. Pagal numatytuosius nustatymus elementai turi reikšmę 0. Jei elementui priskirsite reikšmę -1, jis vizualiai bus iškeltas į priekį.

4. taikyti vizualinį rūšiavimą

Jei norite vizualiai sureguliuoti pirmąjį elementą, turėtumėte atkreipti dėmesį į toliau nurodytus dalykus: Numatytoji savybės order reikšmė yra 0. Norėdami vieną elementą rodyti priešais kitą, turite pasirinkti mažesnę reikšmę. Galimi tokie priskyrimai kaip -1, -2 ar net neigiamos šimto reikšmių reikšmės.

5. Atlikite tolesnius koregavimus

Pakeiskite likusių elementų eiliškumo reikšmes. Pavyzdžiui, norėdami, kad antrasis elementas būtų pirmoje pozicijoje, turėtumėte jį pažymėti reikšme -1 arba priskirti jam mažesnę reikšmę nei dabartinė eiliškumo reikšmė.

6. naudokite neigiamą eiliškumo vertę

Jei naudodami order savybę keičiate eiliškumą, vaizdinė tvarka surūšiuojama didėjimo tvarka, o mažiausia reikšmė pateikiama pirma.

7. pakeisti lankstumo kryptį

Vienas iš galingiausių įrankių yra savybė flex kryptis. Jei nustatysite ją į eilutę-atvirkščiai, rodymo tvarka pasikeis iš dešinės į kairę. Patikrinkite, kaip vizualiai išdėstyti elementai po šio pakeitimo.

8. eilės tvarkos keitimas atvirkštine kryptimi

Jei naudojate flex-direction: column;, išdėstymas atvaizduojamas iš viršaus į apačią. Šiuo atveju taip pat galima naudoti neigiamą order atributą, kad paveiktumėte tvarką.

9. taikymas ekrano skaitytuvui

Jei norite atsižvelgti į vaizdinę tvarką, skirtą ekrano skaitytuvams, svarbu žinoti, kad ekrano skaitytuvai nuskaito pradinę DOM tvarką. Todėl vizualiniai pertvarkymai su tvarka nėra prieinami visiems naudotojams.

Apibendrinimas

Šiame vadove sužinojote, kaip naudoti CSS savybę order, kad galėtumėte valdyti flexbox elementų matomumą ir tvarką. Taip pat sužinojote, kaip pakeisti rodymo kryptį naudojant flex-direction, kad maketai būtų dar lankstesni ir patogesni naudotojams. Nepamirškite, kad vizualiniai rodymo pakeitimai nekeičia pagrindinės DOM tvarkos, į kurią reikėtų atsižvelgti siekiant užtikrinti prieinamumą.