Väli ja joustolaatikko: Gap-ominaisuuden käyttö on niin helppoa

Verkkokehityksessä layoutilla on ratkaiseva rooli houkuttelevien ja käyttäjäystävällisten verkkosivujen suunnittelussa. Yleisesti käytetty työkalu layoutia varten on Flexbox, joka mahdollistaa joustavan ja responsiivisen elementtien järjestelyn. Usein kuitenkin elementtien välille tarvitaan etäisyyksiä selkeän ja miellyttävän rakenteen luomiseksi. Tässä tulee esiin CSS-ominaisuus gap, joka tarjoaa elegantin ratkaisun etäisyysongelmaan erityisesti Flexbox-layouteissa. Tässä opetusohjeessa näytän, kuinka voit tehokkaasti käyttää gap-ominaisuutta.

Tärkeimmät havainnot

• Gap-ominaisuus mahdollistaa etäisyyksien määrittämisen lasten elementtien välille Flex-containereissa.
• Gap on helpompaa ja tehokkaampaa kuin marginin käyttö.
• Voit käyttää gapia riippumatta containerelementtien padding-arvoista saadaksesi siistin layoutin.

Askel askeleelta -ohjeet

1. Luo peruspohjainen Flexbox-layout

Aluksi sinun tulee luoda yksinkertainen Flexbox-layout kolmella elementillä. Määritä container ja aseta display: flex; aktivoimaan Flexbox.

Tässä meillä on kolme joustavaa laatikkoa, jotka ovat järjestetty rivittäin (row). Ensimmäisellä ja kolmannella elementillä on sama peruskoko, kun taas keskimmäinen elementti vie käytettävissä olevan tilan.

2. Aktivoi flex-grow keskimmäiselle elementille

Varmistaaksesi, että keskimmäinen elementti vie enemmän tilaa, asetamme flex-grow ominaisuuden tälle elementille arvoon 1, kun taas muilla kahdella elementillä on peruskoko 100.

Kun nyt muutat layoutia leveyssuunnassa, näet että keskimmäinen elementti mukautuu, kun taas uloimmat elementit pysyvät vakiona.

3. Lisää etäisyys elementtien välille

Parhaillaan laatikoillamme ei ole etäisyyksiä toisiinsa. Jotta se näyttäisi houkuttelevalta, haluat lisätä etäisyyksiä elementtien välille. Voisit käyttää marginia, mutta tämä aiheuttaa nopeasti ongelmia, varsinkin viimeisen elementin käsittelyssä.

Tässä olisi yleistä, että asettaisit margin-right-arvon 8px kaikille laatikoille. Valitettavasti tämä aiheuttaa sen, että myös viimeisellä elementillä on ylimääräinen etäisyys.

4. Poista margin viimeiseltä elementiltä

Kun käytät margin-rightia jokaisessa elementissä, sinun täytyy nollata se viimeisestä elementistä, mikä voi olla hankalaa. Siksi etäisyyksien asettaminen marginilla ei ole optimaalista.

Tässä vaiheessa käy selville, että gapin käyttö on huomattavasti eleganteimpaa.

5. Esittele gap-ominaisuus

Parantaaksesi edellä mainittua tilannetta voit käyttää gap-ominaisuutta. Aseta gap: 8px; Flex-containerillesi. Tämä yksinkertainen CSS luo automaattisesti halutun etäisyyden lasten elementtien välille.

Gapin etuna on, että sinun ei tarvitse hallita marginaaleja viimeiselle elementille enää. Etäisyys levitetään tasaisesti kaikkialle.

6. Lisää padding

Elementtien välisen etäisyyden lisäksi saatat haluta määrittää ulkoisen etäisyyden ympärilleen. Tätä varten voit käyttää paddingia.

Kun käytät padding: 10px; saat tasaisen etäisyyden koko Flexboxin ympärille.

7. Testaa layout

Nyt kun olet määritellyt gap- ja padding-arvot, testaa layoutiasi muuttamalla containerin leveyttä. Näet, että etäisyys elementtien välillä pysyy vakiona, riippumatta containerin koosta.

Layout on nyt hyvin jäsennelty ja visuaalisesti houkutteleva.

8. Hyödynnä kehittäjätyökaluja

Ymmärryksen ja etäisyyksien visualisoinnin kannalta voi olla hyödyllistä käyttää selaimen kehittäjätyökaluja. Täällä voit nähdä välimatka-asetukset ja varmistaa, että kaikki toimii odotetusti.

Kun viet hiiren Flex-säiliön päälle, näet viiratut alueet, jotka edustavat välimatkaa gap-ominaisuuden kautta.

Yhteenveto

Flexbox-layoutien gap-ominaisuudella voit suunnitella lasten elementtien välit tyylikkäästi ja tehokkaasti ilman että sinun tarvitsee turvautua hankaliin marginaalisääntöihin. Sen käyttö auttaa takaamaan siistin ja järjestetyn ulkoasun.