Šodienas pamācībā aplūkosim interesantu uzdevumu par tēmu "Kārtība" logrīkā Flexbox. Jūs uzzināsiet, kā divos dažādos veidos pārkārtot elementu secību elastīgajā konteinerā. Mēs izmantosim pieejas ar CSS klasēm , kā arī elastīgās kastes īpašību flex-direction. Šīs rokasgrāmatas beigās jūs spēsiet ne tikai izprast elementu secību, bet arī efektīvi to īstenot. Sāksim!
Galvenās atziņas
- Jūs varat mainīt elastīgo elementu secību, izmantojot īpašību order.
- Alternatīva elementu sakārtošanas metode ir īpašība flex-direction, kas ļauj norādīt secību.
Soli pa solim
Lai mainītu satura secību flex konteinerā, vispirms izveidosim vienkāršu izkārtojumu. Lai to izdarītu, var ņemt HTML dokumentu, kurā ir pieci div elementi, kuru secību vēlamies mainīt. Div elementos esošie skaitļi apzīmē pašreizējo secību no 5 līdz 1.
Pirmajā solī atveriet HTML failu un ievietojiet struktūru. Div elementiem jābūt apzīmētiem ar klasēm L1, L2, L3, L4 un L5.
Tagad, kad esat izveidojuši pamatstruktūru, vēlamies pārliecināties, ka elementu sākotnējā secība ir no kreisās puses uz labo no 5 līdz 1. Mērķis ir attēlot elementus augošā secībā no 1 līdz 5.
Lai to panāktu, izmantojiet kārtības īpašību CSS katram elementam. Sākumā iestatiet kārtības vērtības tā, lai L1 būtu 5, L2 - 4, un tā tālāk līdz L5, kam ir 1.
Ja pēc tam pārlūkprogrammā saglabāsiet izmaiņas un pārlādēsiet lapu no jauna, elementi tagad būs redzami pareizā secībā no 1 līdz 5.
Tomēr, kā jau minēts, ir divi veidi, kā atrisināt šo uzdevumu. Pirmais veids ir izmantot iepriekš aprakstīto kārtas īpašību. Otrais veids, ko mēs tagad aplūkosim, izmanto īpašību flex-direction.
Lai izpētītu pārējās iespējas, vispirms komentējiet kārtības īpašību savā CSS failā, lai mēs varētu izmēģināt jauno metodi, nezaudējot iepriekšējo.
Tagad konteineram varat izmantot īpašību flex-direction. Pēc noklusējuma tas ir iestatīts uz rindu. Mēs to mainām uz rindu-atgrieztā secībā, un tādējādi elementu secība tiks apgriezta.
Pēc tam, kad esat mainījuši elastīgo virzienu uz rindu-atgrieztā, vēlreiz saglabājiet failu un pārlūkā ielādējiet priekšskatījumu. Tagad jums vajadzētu redzēt elementus pareizā secībā no 1 līdz 5, neizmantojot order īpašību.
Cits piemērs, ko varat izmēģināt, ir kolonnas apgriešana, lai sakārtotu elementus vertikāli. Tas sakārto izkārtojumu no apakšas uz augšu.
Tagad jums vajadzētu skaidri saprast divas metodes, kā mainīt elastīgo elementu secību: īpašība order un īpašība flex-direction. Abas metodes piedāvā dažādas pieejas satura attēlošanas pielāgošanai.
Kopsavilkums
Šajā rokasgrāmatā jūs uzzinājāt, kā manipulēt ar elementu secību flex konteinerā. Tagad jūs zināt, kā izmantot īpašību order un kā pielāgot īpašību flex-direction, lai mainītu elementu izvietojumu gan horizontāli, gan vertikāli. Eksperimentējiet ar šīm pieejām, lai labāk izprastu elastīgā kastes izkārtojumu.
Biežāk uzdotie jautājumi
Kā mainīt elastīgo elementu secību, izmantojot īpašību order?Katram elementam varat piešķirt īpašību order un iestatīt vērtības, lai tie tiktu parādīti vēlamajā secībā.
Vai ir veids, kā mainīt secību bez secības?Jā, lai mainītu secību, varat iestatīt elastīgo elementu īpašību virziens uz rindu-atpakaļ vai kolonnu-atpakaļ.
Kuru no abām metodēm ir labāk izmantot,ir atkarīgs no jūsu konkrētajām prasībām un vēlamās izkārtojuma stratēģijas. Abas metodes ir efektīvas.
