On oluline, et kasutajaliides oleks intuitiivne ja atraktiivne. Üks võimalus selle saavutamiseks on kasutada Flexbox CSSis. Flexboxi abil saate mitte ainult kontrollida elementide paigutust ja ruumi paigutust kujunduses, vaid saate ka muuta elementide nähtavust ja järjestust, muutmata seejuures DOMi (Document Object Model). Selles õpetuses vaatleme lähemalt CSS-i omadust nimega order, mis võimaldab teil muuta Flexboxi elementide järjestust, samuti flex-directioni kasutamist elementide kuvamise järjekorra lihtsaks pööramiseks.
Olulisemad järeldused
- CSS-i omadus order mõjutab Flexboxi elementide nähtavat järjestust.
- order-järjekorra muutused ei mõjuta originaalset järjestust DOM-is.
- Fleksi suund saab flex-directioniga pöörata (nt row-reverse), et muuta kuvamist.
Samm-sammuline juhend
order-omaduse toimimise ja võimaluse demonstreerimiseks mõista, kuidas flex-directioni abil kuvasuunda pöörata, käime järgmised sammud läbi:
1. Flexboxi põhialuste loomine
Esiteks peate veenduma, et teie konteineril on fleksi omadused. Selleks seadke CSS-i reegel display: flex; oma konteinerile.
2. Elementide järjestuse DOM-is mõistmine
Kontrollige elementide algset järjestust oma DOM-is. Oluline on teada, et DOM-i vaikimisi järjestus on aluseks, millele Flexbox-Order tugineb.
3. order-omaduse kasutamine
Elementide kuvamise mõjutamiseks saate seada order-omaduse negatiivsetele väärtustele. Vaikimisi on elementide väärtus 0. Kui määratlete elemendile väärtuse -1, tõmmatakse see visuaalselt ettepoole.
4. Visuaalse sortimise rakendamine
Kui soovite kohandada esimest elementi visuaalselt, pidage meeles järgmist: order-omaduse vaikimisi väärtus on 0. Elemendi teise elemendi ette kuvamiseks valige väiksem väärtus. Võimalikud on omistused nagu -1, -2 või isegi negatiivsed sajalised väärtused.
5. Täiendavad kohandused
Muutke ülejäänud elementide order-väärtusi. Näiteks teise elemendi esikohale paigutamiseks märkige see -1-ga või andke sellele väärtus, mis on väiksem kui praegune order-väärtus.
6. Negatiivse order-väärtuse kasutamine
Kui kasutate order-omadust järjestuse muutmiseks, sorteeritakse visuaalne järjekord tõusvalt kasvavas järjekorras, kus väikseim väärtus tuleb esimesena.
7. Fleksi suuna pööramine
Üks võimsamaid vahendeid on omadus flex-direction. Kui seate selle väärtuseks row-reverse, muutub järjestus paremalt vasakule kuvamiseks. Kontrollige, kuidas need muudatused visuaalselt elemente paigutavad.
8. Orderi muutus vastupidises suunas
Kui kasutate flex-direction: column;, renderdatakse paigutus ülevalt alla. Negatiivset order-attribuuti saab sel juhul samuti kasutada järjekorra mõjutamiseks.
9. Rakendamine ekraanilugejale
Kui soovite visuaalset järjestust arvesse võtta ekraanilugejale, on oluline teada, et ekraanilugeja loeb ette algse DOM-järjestuse. Seetõttu pole kõik kasutajad order-omadusega visuaalseid ümberkorraldusi juurdepääsetavad.
Kokkuvõte
Selles juhendis õppisid sa, kuidas kasutada CSS omadust order, et kontrollida paindliku kasti elementide nähtavust ja järjestust. Lisaks avastasid, kuidas saad kasutada flex-directionit, et pöörata oma paigutused veelgi paindlikumaks ja kasutajasõbralikumaks. Pea meeles, et visuaalsed kohandused ei muuda dom-kihi järjestust, mida tuleks arvestada ligipääsetavuse seisukohast.
Korduma kippuvad küsimused
Kuidas töötab omadus order?Omadus order mõjutab paindliku kasti elementide nähtavat järjestust. Madalam väärtus kuvatakse esimesena.
Kuidas saan pöörata flex-suunda?Määra omadus flex-suund väärtusele row-reverse või column-reverse, et muuta kuvamisjärjekorda.
Kas omadus order mõjutab dom-kihi järjestust?Ei, omadus order muudab ainult elementide visuaalset kuvamist, mitte dom-kihi järjestust.
Mis juhtub, kui order-väärtused on võrdsed?Kui order-väärtused on võrdsed, kasutatakse kuvamiseks algset dom-kihi järjestust.
Kuidas peaksin hakkama saama ekraanilugeritega?Kuna ekraanilugejad loevad ette dom-kihi järjestuse, peaksid tagama, et visuaalne paigutus jääb kõigile kasutajatele ligipääsetavaks.
