Galerija ar Flexbox: responsīvo izkārtojumu izveides rokasgrāmata

Šajā pamācībā uzzināsiet, kā izveidot pievilcīgu galerijas izkārtojumu , izmantojot Flexbox CSS un HTML. Flexbox modelis sniedz elastīgas iespējas elementu izkārtojumam tīmekļa vietnē , jo īpaši tādiem izkārtojumiem kā galerijas, kur ļoti svarīga ir eleganta un atsaucīga noformēšana. Mēs apspriedīsim HTML koda struktūru, kā arī atbilstošos CSS stilus un soli pa solim tos izveidosim.

Galvenās atziņas

• Šajā pamācībā uzzināsiet, kā izmantot Flexbox, lai izveidotu uz attēliem balstītu izkārtojumu, tostarp izmantot konteineru elementus un piemērot tādas CSS īpašības kā display: flex, position: absolute un justify-content: space-between.

Soli pa solim

1. solis: Izveidojiet HTML koda pamata struktūru

Sāciet ar HTML dokumenta pamata struktūru. Izveidojiet konteineru div ar nosaukumu main un pievienojiet vēl vienu div ar klasi images, kas satur visus attēlu tagu elementus (IMG). Šos attēlus varat iegūt no tīmekļa vietnes, kurā ir publiskā domēna attēli. Ņemiet vērā, ka izkārtojums koncentrējas uz trim attēliem, tāpēc ceturtais netiek parādīts.

Solis Nr. 2: Definējiet CSS galvenajam konteineram.

Galvenā konteinera stilam iestatiet platumu 100%, lai tas pielāgotos loga platumam. Augstumu iestatiet uz 140 pikseļiem un pārliecinieties, ka pozicionēšana ir relatīva, lai nodrošinātu, ka absolūtās pozīcijas, ko izmantosim attēliem un bultām, var pareizi orientēties.

Solis Nr. 3: Attēlu konteinera stilizēšana

Iestatiet attēlu konteineram (.images) position: absolute, lai tas peldētu virs bultiņu konteinera. Iestatiet platumu un augstumu 100 %, lai tas tiktu pilnībā novietots galvenajā konteinerā. Izmantojiet arī flexbox īpašības.

Solis Nr. 4: Pielietojiet elastīgās kastes īpašības attēlu izkārtojumam

Klasei .images iestatiet display: flex un izlīdziniet saturu rindā ar flex-direction: row. Pievienojot 4 pikseļu atstarpi starp attēliem, tiek nodrošināta lielāka atstarpe starp tiem, kas atslābina izkārtojumu.

Solis Nr. 5: attēlu stilu definēšana

Galerijas attēliem (img) jānosaka 240 pikseļu platums un 140 pikseļu augstums, izmantojot flexbox īpašību flex-basis. Varat arī iestatīt flex-grow un flex-shrink uz 0, lai attēli nemainītu savu izmēru un vienmēr saglabātu izvēlētos izmērus.

6. solis: Izveidojiet bultiņu konteineru

Tagad tiek izveidots konteiners navigācijas bultām. Arī šim konteineram ir jābūt iestatītam position: absolute (pozīcija: absolūts), un tā augstumam un platumam jābūt 100 %, lai tas vienmēr būtu novietots virs attēliem. Izmantojiet display: flex, lai bultas izvietotu horizontāli.

7. posms: bultiņu stilizēšana

Iestatiet justify-content īpašību space-between, lai viena bulta būtu pa kreisi, bet otra pa labi. Bultiņām varat izmantot Unicode rakstzīmes, lai parādītu bultiņas. Teksta krāsu iestatiet uz baltu un pārliecinieties, ka bultiņu fons ir caurspīdīgs.

8. posms: Ievietojiet novietošanas efektus

Lai pievienotu uzniršanas efektu, varat mainīt bultiņu fona krāsu, kad pārvietojat peli virs tām. Iestatiet nedaudz caurspīdīgu baltu krāsu, lai fons izgaismotos un radītu interaktīvu sajūtu.

9. posms: Pārbaudiet un pielāgojiet izkārtojumu

Tagad ir svarīgi pārbaudīt visu izkārtojumu un veikt nepieciešamos pielāgojumus. Atkarībā no jūsu vietnes prasībām var viegli mainīt atstarpes starp attēliem, konteinera lielumu vai vispārējo krāsu shēmu.

Kopsavilkums

Šajā pamācībā jūs uzzinājāt, kā izveidot reaģējošu attēlu galeriju, izmantojot Flexbox. Jūs esat izgājuši visus soļus, sākot no pamatstruktūras līdz pat vizuālajiem efektiem. Flexbox ļauj elastīgi izvietot elementus, kas padara jūsu dizainu īpaši pievilcīgu.