Šajā pamācībā uzzināsiet, kā HTML un CSS formātā izveidot sarežģītu, ligzdotu izkārtojumu, izmantojot Flexbox. Mēs regulāri saskaramies ar izaicinājumu kontrolēt vairākus konteinerus un izstrādāt pievilcīgu izkārtojumu, kas būtu gan funkcionāls, gan estētiski pievilcīgs. Flexbox ļauj salīdzinoši viegli realizēt izkārtojumus, neķeroties pie sarežģītiem CSS pozicionēšanas noteikumiem. Sāksim darbu un izveidosim piemēru par ieliktu izkārtojumu, kurā izmantoti Flexbox pamati.
Galvenās atziņas
- Lai izveidotu elastīgus izkārtojumus, ļoti svarīgi ir izprast flexbox īpašības, jo īpaši flex-grow, flex-shrink un flex-base.
- Inteliģenti izmantojot šīs īpašības, varat nodrošināt, ka izkārtojums pielāgojas dažādiem ekrāna izmēriem, kā arī mainīgam saturam.
Soli pa solim
1. solis: Izveidojiet pamatstruktūru
Sākam ar HTML pamatstruktūru. Izveidojiet elementu visam konteineram, ko saucam par sakni. Zem tā ievietojiet header, main un footer kā tiešos bērnus. Galvenajā apgabalā pēc tam tiks ietverti turpmāki apakšelementi, tostarp sānjoslas un saturs.
Solis Nr. 2: konteinera CSS stilizēšana
Tagad pievienosim CSS īpašības jūsu saknes konteineram. Iestatiet display: flex un flex-direction: column, lai nodrošinātu, ka tiešie bērni (header, main, footer) ir izkārtoti vertikāli. Lai optimizētu vizuālo efektu, varat arī pielāgot padding un margin, lai optimizētu vizuālo efektu.
3. solis: Galvenās zonas stilizēšana
Lai padarītu galveno apgabalu elastīgāku, arī šim konteineram iestatiet display: flex. Tas ļauj izkārtot tā apakšelementus (sānjoslu kreisajā pusē, saturu, sānjoslu labajā pusē) horizontāli. Pārliecinieties, ka izmantojat flex-direction: row (noklusējuma vērtība).
4. darbība: Sānu joslu un satura elastīgās īpašības
Tagad pievienosim elastīgās īpašības sānu joslām un satura zonai. Sānu joslai kreisajā pusē varat iestatīt flex: 0 0 120px, lai nodrošinātu, ka šai sānu joslai vienmēr ir fiksēts platums. Satura apgabalam iestatiet flex: 1, lai tas elastīgi aizņemtu atlikušo vietu.
5. solis: pielāgojiet kājenes daļu
Arī pēdiņa tiek pielāgota saknes konteinera elastīgās kastes īpašībām. Parasti pēdiņa paliek statiska apakšā. Pārliecinieties, ka attiecīgi pielāgojat platumu un augstumu, lai nodrošinātu skaidru nodalījumu starp dažādām zonām.
6. posms: Sānu joslu precizēšana
Kad izkārtojuma struktūra ir izveidota, sānjosliedēm varat veikt papildu stila izmaiņas. Lai pielāgotu sānjjoslu platumu, spēlējieties ar elastīgajām vērtībām un izmantojiet responsīvā dizaina apsvērumus, lai nodrošinātu, ka izkārtojums izskatās labi dažādos ekrāna izmēros.
7. posms: Pārbaudiet un pielāgojiet
Pēc pamatstilu ieviešanas pārbaudiet izkārtojumu dažādās ierīcēs un ekrāna izmēros. Pievērsiet uzmanību tam, kā satura apgabals uzvedas dažādos scenārijos, un attiecīgi pielāgojiet elastīgās īpašības, lai nodrošinātu optimālu lietotāja saskarni.
8. posms: Ievietojiet turpmāku ligzdošanu
Kad esat apmierināts ar izkārtojumu, varat iedziļināties struktūrā un izveidot papildu ieligzdotus fleksboksa konteinerus galvenēs, sānu joslās vai pat satura apgabalā. Tas nodrošina elastību, lai izstrādātu sarežģītākus izkārtojumus.
Kopsavilkums
Flexbox sniedz iespēju izveidot sarežģītus, ligzdotus izkārtojumus, kas ir gan pielāgojami, gan vizuāli pievilcīgi. Panākumu atslēga ir izprast un izmantot flex īpašības, lai efektīvi kontrolētu izkārtojumu. Tas ļauj izstrādāt lietotāja saskarnes, kas elastīgi pielāgojas dažādiem satura un ekrāna izmēriem.
