Šajā pamācībā uzzināsiet, kā izlīdzināt elastīga konteinera pakārtotos elementus gar šķērsasi. Flexbox metode CSS ļauj elastīgi un dinamiski izkārtot elementus, kas ir būtiski responsīviem dizainparaugiem. Jūs soli pa solim atklāsiet dažādas izlīdzināšanas iespējas, lai optimizētu izkārtojumus un padarītu tos pievilcīgākus.
Galvenās atziņas
- Flexbox piedāvā dažādas metodes pakārtoto elementu izlīdzināšanai.
- Īpašībām align-items un justify-content ir svarīga nozīme elastīgo elementu izkārtojumā.
- Pakārtotos elementus var izlīdzināt gan centrēti, gan pie labās vai kreisās malas.
Soli pa solim
1. solis: Izveidojiet elastīgo izkārtojumu
Sāciet ar elastīga izkārtojuma izveidi. Iestatiet konteinera displeju uz elastīgu un definējiet elementu virzienu ar flex-direction: column. Konteinera platumam jābūt 100% un augstumam 600 pikseļu, lai tas aizņemtu visu pārlūkprogrammas laukumu.
2. solis: Atiestatiet rezervi
Lai nodrošinātu, ka neiejaucas nevēlamas pārlūkprogrammas iestatījumu atstarpes, iestatiet ķermeņa atstarpi uz 0. Tas palīdz nodrošināt vienotu izkārtojumu.
Solis 3: Pielietojiet lodziņa stilus
Pievienojiet konteineram vēl vienu lodziņu, lai nošķirtu pakārtotos elementus un precizētu izkārtojuma struktūru. Katram lodziņam jābūt 200 pikseļu platam.
Solis Nr. 4: Sākotnējā pakārtoto elementu izlīdzināšana
Pēc noklusējuma pakārtotie elementi ir izlīdzināti pa kreisi, jo platums ir iestatīts uz 200 pikseļiem. Redzams, ka visi pakārtotie elementi tiek parādīti konteinera kreisajā pusē.
5. darbība: Izcentrējiet pakārtotos elementus
Lai izlīdzinātu pakārtotos elementus konteinera centrā, izmantojiet īpašību align-items: centre. Tas nodrošina elastīgo elementu centrēšanu, kas bieži vien rada pievilcīgāku estētiku vietņu dizainā.
6. darbība: Izlīdziniet elementus pa labi
Ja vēlaties izlīdzināt elementus pa labi, izmantojiet īpašību align-items: flex-end. Pārliecinieties, ka šeit lietojat flex-end, nevis right, jo Flexbox darbojas pēc citas loģikas.
7. solis: Flex virziena maiņa
Ja mainīsiet flex virzienu uz rindu, redzēsiet, ka pakārtotie elementi tagad ir horizontāli. Ja tagad atkal izmantosiet align-items: flex-end, elementi tiks izlīdzināti konteinera apakšā.
8. darbība: Atgriešanās pie sākotnējā izlīdzinājuma
Pēc eksperimentēšanas ar dažādiem izlīdzinājumiem varat atgriezties pie flex-direction: column un atkal pielāgot izlīdzinājumus, lai panāktu vēlamo izkārtojumu.
9. solis: iestatiet maksimālo platumu
Ja nepieciešams, varat arī noteikt maksimālo konteinera platumu, lai tas paplašinātos līdz šim platumam centrā. Tādējādi izkārtojums kļūst elastīgāks un izskatās pievilcīgāks, izmantojot dažādus logu izmērus.
10. posms: Praktisks pielietojums
Visbeidzot, varat paši pārbaudīt, kā visus pakārtotos elementus var izlīdzināt, izmantojot īpašības align-items un justify-content. Eksperimentējiet ar dažādiem izkārtojumiem un atklājiet Flexbox piedāvātās iespējas.
Kopsavilkums
Šajā pamācībā jūs uzzinājāt, kā izlīdzināt elastīgā konteinera pakārtotos elementus gar šķērsasi. Dažādās iespējas, piemēram, centrēts vai izlīdzināts pa labi, piedāvā elastīgas tīmekļa dizaina iespējas.
Biežāk uzdotie jautājumi
Kas ir Flexbox un kam tas tiek izmantots?Flexbox ir CSS izkārtojuma modulis, kas ļauj elastīgi izvietot elementus konteinerā. To bieži izmanto, lai veidotu responsīvus dizainus.
Kā es varu centrēt pakārtotos elementus?Pakārtotos elementus var centrēt, izmantojot CSS īpašību align-items: centre elastīgajā konteinerā.
Kādas ir elementu izlīdzināšanas īpašības?Svarīgākās izlīdzināšanas īpašības ir align-items (vertikālā izlīdzināšana) un justify-content (horizontālā izlīdzināšana).
Kā mainīt flex virzienu?Flex virzienu var iestatīt, izmantojot īpašību flex-direction, proti, uz rindu vai kolonnu.
Vai pakārtotajiem elementiem var piešķirt atšķirīgu izlīdzinājumu?Jā, ar align-items var iestatīt izlīdzinājumu visiem pakārtotajiem elementiem vienlaicīgi. Tomēr atsevišķus atvasinātos elementus nevar pielāgot tieši, ja vien neizmantojat align-self, lai kontrolētu konkrēto elementu.
