"Flexbox" CSS ir HTML: konkretus reaguojančio dizaino pavyzdys

Šioje pamokoje parodysiu, kaip naudojant " Flexbox" CSS ir HTML kodus sukurti reaguojantį maketą su dviem šoninėmis juostomis ir pagrindine sritimi. Flexbox leidžia lanksčiai išdėstyti elementus taip, kad jie dinamiškai prisitaikytų prie ekrano dydžio. Nesvarbu, ar norite sukurti tik paprastą svetainę, ar sudėtingą dizainą, "Flexbox" technologija suteikia daug galimybių. Pradėkime nuo konkretaus pavyzdžio!

Pagrindinės išvados

• Flexbox leidžia sukurti reaguojantį maketą, kuriame skirtingi elementai tolygiai paskirstyti per visą turimą plotį.
• Flex savybės nustato, kiek vietos užima kiekvienas elementas kitų elementų atžvilgiu.

Žingsnis po žingsnio

1 žingsnis: nustatykite pagrindinę struktūrą

Kad galėtumėte dirbti su "Flexbox", pirmiausia reikia pagrindinės HTML struktūros. Sukurkite HTML failą ir pridėkite pagrindines žymas , , ir . Tada į žymą pridėkite šoninių juostų ir pagrindinio turinio konteinerio elementus.

2 veiksmas: pridėkite CSS, kad sukurtumėte išdėstymą

Dabar norėsite CSS pagalba savo maketui pridėti stilių.

3 žingsnis: suaktyvinkite "Flexbox

Norėdami suaktyvinti "Flexbox", konteineriui pritaikykite savybę display: flex;. Taip tiesioginiai konteinerio vaikai taps flex elementais. Tikriausiai taip pat norėsite nustatyti kryptį: Naudokite flex-direction: row; horizontaliam išdėstymui.

4 veiksmas: Nustatykite flex savybes vaikams

Tada nustatysite vaikų elementų flex savybes. Čia galite apibrėžti, kiek vietos turėtų būti skirta kiekvienam elementui kitų elementų atžvilgiu. Pavyzdžiui, pagrindiniam elementui galima nustatyti flex: 2;, o dviem šoninių juostų elementams - flex: 1;, kad pagrindinis elementas užimtų dvigubai daugiau vietos nei kiekviena šoninė juosta.

5 veiksmas: sureguliuokite reaguojantį plotį

Norėdami užtikrinti, kad jūsų maketas taip pat reaguotų į poreikius, turite nustatyti konteinerio width: 100%;. Taip maketas bus pritaikytas prie naršyklės lango pločio. Taip pat pasirinkite aukštį, kad būtų galima optimizuoti išdėstymo vaizdus.

6 veiksmas: Nustatykite fiksuotus šoninių juostų pločius

Jei norite apibrėžti fiksuoto pločio šoninę juostą, į "Flex" maketą galite įtraukti fiksuotą šoninės juostos plotį. Tiesiog pašalinkite šoninės juostos flex savybę, kad ji būtų tik mažiausio pločio.

7 veiksmas: tolesni koregavimai ir bandymai

Dabar turėtumėte patikrinti savo maketą naršyklėje ir įsitikinti, kad viskas atrodo teisingai. Eksperimentuokite su skirtingomis "Flex" reikšmėmis ir pločiais, kad pamatytumėte, kaip reaguoja maketas. Padidinkite naršyklės langą, kad išbandytumėte dizaino reagavimo savybes.

8 veiksmas: vertikalaus išdėstymo įgyvendinimas

Pasirinktinai taip pat galite pakeisti savo maketą ir sukurti vertikalųjį maketą. Norėdami tai padaryti, pakeiskite flex konteinerį į stulpelį naudodami flex-direction: column;. Šis žingsnis būtinas, jei norite turėti daugiau dizaino parinkčių.

9 veiksmas: pridėkite naršyklių palaikymą

Dirbdami nepamirškite patikrinti naršyklių palaikymo. Kai kurios senesnės naršyklių versijos reikalauja "Flexbox" priešdėlių. Jei reikia, pridėkite atitinkamus priešdėlius, kad jūsų maketas visur atrodytų gerai.

10 veiksmas: atlikite galutinius pakeitimus ir išsaugokite

Patikrinkite visus valdiklius ir įsitikinkite, kad jūsų maketas gerai atrodo skirtingo dydžio ekranuose. Išsaugokite visus pakeitimus ir padarykite maketo ekrano nuotraukas, kad galėtumėte apžvelgti savo pažangą.

Apibendrinimas

Šiame vadove sužinojote, kaip sukurti paprastą, reaguojantį maketą naudojant "Flexbox". Flex savybės leidžia lengvai valdyti elementų dydį ir išdėstymą. Atlikę aprašytus veiksmus, galite sukurti maketą su dviem šoninėmis juostomis ir pagrindine sritimi, kuris elegantiškai prisitaiko prie skirtingų ekrano dydžių.