Veebiarenduses mängib paigutus olulist rolli, et luua atraktiivseid ja kasutajasõbralikke veebilehti. Sagedasti kasutatav tööriist kujunduse jaoks on Flexbox, mis võimaldab sul elemente paindlikult ja reageerivalt paigutada. Sageli on aga elementide vahelised vahed vajalikud selge ja meeldiva struktuuri loomiseks. Siinkohal tuleb mängu CSS omadus gap, mis pakub eriti Flexbox-i paigutustes elegantsi lahenduse vahedega seotud probleemidele. Selles õpetuses näitan sulle, kuidas saad tõhusalt kasutada gap omadust.
Olulisemad järeldused
- Gap-i omadus võimaldab sul määratleda vahed kild-elementide vahel Flex-ühikus.
- Gap on lihtsam ja efektiivsem kui marginaalide kasutamine.
- Saad kasutada gap-i iseseisvalt mahutitelementide täitmise väärtustest, et saada puhas paigutus.
Samm-sammuline juhend
1. Loo algeline Flexbox paigutus
Alustuseks pead looma lihtsa Flexbox-i paigutuse kolme elemendiga. Määra konteiner ja seadista display: flex;, et aktiveerida Flexbox.
Siin on meie kolm paindlikku kasti, mis on reas. Esimesel ja kolmandal elemendil on sama baassuurus, samas kui keskmine element võtab äraoleva ruumi.
2. Luba flex-grow keskmisele elemendile
Tagamaks, et keskmine element võtaks rohkem ruumi, määrame sellele omaduse flex-grow väärtusega 1, samal ajal kui teistele kahele elemendile on määratud baassuurus 100.
Kui sa nüüd muudad laiust, näed, et keskmine element kohandub, samal ajal kui välised elemendid jäävad konstantselt.
3. Lisa elementide vahele vahed
Praegu ei ole meil kaunitaridel üksteisega vahet. Selleks, et see hea välja näeks, soovid lisada elementide vahele vahed. Sa võiksid kasutada marginaali, kuid see tekitab kiiresti probleeme, eriti viimase elemendi käsitlemisel.
Siin oleks tavapärane määrata igale kastile marginaali parem-väärtuseks 8px. Kahjuks viib see olukorrani, kus viimasel elemendil on ka lisavahemaa.
4. Marginaal viimase elemendi jaoks kõrvaldada
Kui kasutad marginaalit paremal kõigi elementide puhul, pead viimase elemendi puhul muutma selle väärtuseks 0, mis võib olla tülikas. Seetõttu pole vahede loomine marginaaliga tõhus lähenemine.
Sel hetkel muutub ilmselgeks, et vahede loomisel gap-i kasutamine on oluliselt elegantssem.
5. Kasutusele võtta Gap-omadus
Probleemi parandamiseks, mida eespool kirjeldatud, võid kasutada gap-omadust. Määra oma Flex-konteinerile gap: 8px;. See lihtne CSS loob automaatselt soovitud vahed kild-elementide vahel.
Gap-i eelis on see, et sa ei pea enam hallata margeine viimasele elemendile. Vahe kohaldatakse ühtlaselt kõikjal.
6. Lisa padding
Lisaks elementide vahedele võid soovida määrata kogu mahutava konteineri ümber välise vahemaa. Selleks saad kasutada paddingut.
Kasutades padding: 10px;, saad ühtlase vahemaa kogu Flexboxi ümber.
7. Testi paigutust
Nüüd, kui oled määranud gap-i ja paddingu väärtused, peaksite testimaks oma paigutust, muutma konteineri laiust. On selge, et vahemik elementide vahel jääb konstantseks, sõltumata konteineri suurusest.
Paigutus on nüüd hästi struktureeritud ja visuaalselt atraktiivne.
8. Arendaja tööriistade kasutamine
Astmete mõistmiseks ja visualiseerimiseks võib olla kasulik kasutada oma brauseri arendaja tööriistu. Siin saad näha vahede seadeid ja veenduda, et kõik toimib ootuspäraselt.
Kui liigutad kursori painduva konteineri kohale, näed joonistatud alasid, mis esindavad vahekaugust gap-omaduse kaudu.
Kokkuvõte
Kasutades gap-omadust painduvate kastide paigutustes, saad lapskomponentide vahed elegantset ja efektiivselt kujundada, ilma keeruliste piirde reeglitele toetumata. Selle kasutamine aitab tagada selge ja korrapärase paigutuse.
Sagedased küsimused
Kuidas gap-omadus toimib?Gap-omadus lisab painduva konteineri lapskomponentide vahele kindla kauguse.
Miks kasutada marginaali asemel hoopis gap-omadust?Gap vältib probleeme viimase elemendiga ja tagab ühtlase vahede jaotuse.
Kas ma saan kasutada gap-omadust ruudustiku paigutustes?Jah, gap-omadust saab kasutada nii painduvate kastide kui ka ruudustiku paigutustes.
