Ir svarīgi, lai lietotāja saskarne būtu intuitīva un pievilcīga. Viens no veidiem, kā to panākt, ir izmantot Flexbox CSS. Izmantojot flexbox, varat ne tikai kontrolēt elementu izlīdzināšanu un izvietojumu izkārtojumā, bet arī mainīt elementu redzamību un secību, neietekmējot DOM (dokumenta objektu modeli ). Šajā pamācībā mēs sīkāk aplūkosim CSS īpašību order, kas ļauj mainīt flexbox elementu secību, kā arī flex-direction izmantošanu, lai viegli mainītu elementu parādīšanas secību.
Galvenie secinājumi
- CSS īpašību secība ietekmē fleksboksa elementu redzamības secību.
- Kārtības secības izmaiņas neietekmē sākotnējo secību DOM.
- Flexbox virzienu var mainīt, izmantojot flex-direction (piemēram, rindu apgriešana), lai mainītu rādīšanas secību.
Soli pa solim
Lai demonstrētu, kā darbojas kārtas īpašība un kā ar flex-direction iespējams mainīt izvietojumu, mēs izpildīsim turpmāk norādītos soļus:
1. izveidosim flexbox pamatus
Pirmkārt, jāpārliecinās, ka konteineram ir elastīgās kastes (flexbox) īpašības. Lai to izdarītu, iestatiet savam konteineram CSS noteikumu display: flex;.
2. Izpratne par elementu secību DOM
Aplūkojiet elementu sākotnējo secību jūsu DOM. Ir svarīgi zināt, ka DOM sākotnējā secība ir sākuma punkts, uz kura balstās flexbox secība.
3. kārtības īpašības izmantošana
Lai ietekmētu elementu izvietojumu, varat iestatīt order īpašību uz negatīvām vērtībām. Pēc noklusējuma elementiem ir vērtība 0. Ja elementam piešķir vērtību -1, tas vizuāli tiek izvilkts uz priekšu.
4. piemērot vizuālo šķirošanu
Ja vēlaties vizuāli sakārtot pirmo elementu, jāņem vērā turpmāk norādītais: Pēc noklusējuma sakārtošanas īpašībai ir iestatīta vērtība 0. Lai vienu elementu attēlotu priekšā otram, jāizvēlas mazāka vērtība. Ir iespējami tādi piešķīrumi kā -1, -2 vai pat negatīvas simts vērtības.
5. Veiciet papildu pielāgojumus
Mainiet atlikušo elementu kārtas vērtības. Piemēram, lai otrais elements būtu pirmajā pozīcijā, tam jāpiešķir apzīmējums -1 vai jāpiešķir vērtība, kas ir mazāka par pašreizējo kārtas vērtību.
6. Izmantojiet negatīvu kārtas vērtību
Ja kārtas mainīšanai izmantojat order īpašību, vizuālā kārtība tiek sakārtota augošā secībā, mazākajai vērtībai esot pirmajai.
7. apgriezt lokanības virzienu
Viens no spēcīgākajiem rīkiem ir īpašība flex-direction. Ja iestatāt šo īpašību uz rindu apgrieztā secība, attēla secība mainās no labās uz kreiso pusi. Pārbaudiet, kā elementi vizuāli izkārtojas pēc šīs izmaiņas.
8. kārtas maiņa pretējā virzienā
Ja izmantojat elastīgo virzienu: kolonna;, izkārtojums tiek attēlots no augšas uz leju. Šajā gadījumā var izmantot arī negatīvu order atribūtu, lai ietekmētu secību.
9. piemērošana ekrāna lasītājam
Ja vēlaties ņemt vērā vizuālo secību ekrānlasītājiem, ir svarīgi zināt, ka ekrānlasītāji nolasa sākotnējo DOM secību. Tāpēc vizuālie pārkārtojumi ar kārtību nav pieejami visiem lietotājiem.
Kopsavilkums
Šajā rokasgrāmatā jūs uzzinājāt, kā izmantot CSS īpašību order, lai kontrolētu elastīgo kastes elementu redzamību un secību. Jūs arī uzzinājāt, kā ar flex-direction mainīt displeju, lai izkārtojumus padarītu vēl elastīgākus un lietotājam draudzīgākus. Atcerieties, ka vizuāli pielāgojumi displejā nemaina pamatā esošo DOM kārtību, kas jāņem vērā pieejamības nodrošināšanai.
Biežāk uzdotie jautājumi
Kā darbojas īpašība order?Īpašība order ietekmē elastīgās kastes elementu redzamo secību. Zemāka vērtība tiek parādīta pirmā.
Kā var mainīt elastīgā lauka virzienu?Lai mainītu rādīšanas secību, iestatiet elastīgā lauka īpašību rindu-atgrieztā vai kolonnu-atgrieztā virzienā.
Vai īpašība order ietekmē DOM secību?Nē, īpašība order maina tikai elementu vizuālo attēlojumu, nevis secību DOM.
Kas notiek, ja secības vērtības ir vienādas?Ja secības vērtības ir vienādas, attēlošanai tiek izmantota sākotnējā DOM secība.
Kā rīkoties ar ekrānlasītājiem?Tā kā ekrānlasītāji nolasa DOM secību, jāpārliecinās, ka vizuālā secība ir pieejama visiem lietotājiem.
