Svojstvo jaz u CSS-u skraćenica je za row-gapi column-gap, specificirajući veličinu žlijebova, što je prostor između redaka i stupaca u rasporedima mreže, flex-a i više stupaca.
/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )
Upotrijebite klizač u demonstraciji u nastavku da biste vidjeli gapsvojstvo na djelu:
Sintaksa
gap prihvaća jednu ili dvije vrijednosti:
- Jedna vrijednost postavlja obje vrijednosti
row-gapicolumn-gapistu vrijednost. - Kada se koriste dvije vrijednosti, prva postavlja,
row-gapa druga postavljacolumn-gap.
.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )Specifikacija za CSS Grid Layout Module definirala je prostor između grid staza pomoću grid-gapsvojstva. gapnamijenjen je zamjeni tako da se praznine mogu definirati u više metoda rasporeda CSS-a, poput flexboxa, ali se grid-gapjoš uvijek trebaju koristiti u slučajevima kada je preglednik možda implementirao, grid-gapali tek treba početi podržavati novije gapsvojstvo.
Vrijednosti
gap prihvaća sljedeće vrijednosti:
normal: (Zadano) Preglednik će odrediti upotrijebljenu vrijednost 1em za izgled s više stupaca i 0px za sve ostale kontekste izgleda (tj. Mrežu i fleks).: Svaki valjani i ne-negativni duljina CSS, kao što supx,em,remi%, među ostalima.: Veličina praznine kao negativna postotna vrijednost u odnosu na dimenziju elementa. (Pogledajte dolje za detalje.)initial: Primjenjuje zadanu postavku svojstva, koja jenormal.inherit: Prihvaća vrijednost praznine roditelja.unset: Uklanja strujugapiz elementa.
Postoci u svojstvima zazora
Kada je veličina spremnika u dimenziji praznine određena, gaprazlučuje postotke u odnosu na veličinu okvira sa sadržajem spremnika u bilo kojoj vrsti rasporeda.
Drugim riječima, kada preglednik zna veličinu spremnika, može izračunati postotnu vrijednost gap. Na primjer, kada je visina spremnika 100 piksela, a vrijednost gappostavljena na 10%, preglednik zna da je 10% od 100 piksela 10 piksela.
Ali kad preglednik ne zna veličinu, zapitat će se: "10% od čega?" U tim se slučajevima gapponaša drugačije ovisno o vrsti izgleda.
U rasporedu mreže postoci se razlučuju prema nuli za određivanje doprinosa unutarnje veličine, ali razlučuju se prema okviru sa sadržajem elementa prilikom polaganja sadržaja okvira, što znači da će staviti razmak između stavki, ali razmak neće utjecati na veličinu spremnika.
U ovom prikazu visina spremnika nije određena. Pogledajte što se događa kada povećate gapveličinu. Zatim postavite gapjedinice piksela i pokušajte ponovo:
U fleksibilnom rasporedu, postoci se u svim slučajevima rješavaju prema nuli, što znači da se praznine neće primijeniti kada preglednik ne zna za veličinu spremnika:
Korištenje funkcije calc () s prazninom
Pomoću calc()funkcije možete odrediti veličinu, gapali u trenutku pisanja ovog teksta za nju nema podrške na Safariju i iOS-u.
.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); )
.grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )Primjeri
gapObjekt je namijenjen za uporabu u mreže, flex i više stupaca izgleda. Provjerimo nekoliko primjera.
Raspored rešetke
U sljedećem pokaznom prikazu možete vidjeti kako gapse koristi za specificiranje row-gapi column-gapsvojstava na spremniku mreže, definirajući oluke između redova mreže i stupaca mreže:
Flex raspored
Primjena razmaka na glavnu os fleksibilnog spremnika označava razmak između fleksibilnih stavki u jednom retku fleks rasporeda.
Ovdje se column-gapkoristi u smjeru reda:
Ovdje se row-gapkoristi u smjeru stupca:
Primjena gapna poprečnu os fleksibilnog spremnika označava razmak između fleksibilnih linija fleks rasporeda.
Evo row-gapsmjera u nizu:
Evo column-gapu smjeru kolone:
Izgled više stupaca
column-gappojavljuje se u rasporedima s više stupaca kako bi se stvorili razmaci između okvira stupaca, ali imajte na umu da row-gapto nema učinka jer radimo samo u stupcima. gapi dalje se može koristiti u ovom kontekstu, ali samo column-gapće se primijeniti.
Kao što možete vidjeti u sljedećem pokaznom prikazu, iako gapsvojstvo ima vrijednost 2rem, stavke razdvaja samo vodoravno, umjesto u oba smjera, jer radimo u stupcima:
Što više znaš…
Postoji nekoliko stvari koje vrijedi napomenuti o radu s gapimanjem.
To je lijep način za sprečavanje neželjenih razmaka
Jeste li ikad koristili margine za stvaranje razmaka između elemenata? Ako nismo oprezni, možemo završiti s dodatnim razmakom prije i poslije grupe predmeta.
Rješavanje koje obično zahtijeva dodavanje negativnih marži ili pribjegavanje pseudo-selektorima radi uklanjanja margine iz određenih stavki. No, lijepa stvar kod upotrebe gapu modernijim metodama rasporeda je ta što imate samo prostor između predmeta. Dodatni dio na početku i na kraju nikada nije problem!
Ali, hej, ako želite imati prostora oko predmeta dok koristite gap, stavite paddingoko spremnika ovako:
.container ( display: flex; gap: 1rem; padding: 1rem; )Veličina žlijeba nije uvijek jednaka vrijednosti praznine
gapImovina nije jedina stvar koja se može staviti razmak između predmeta. Margine, obloge justify-contenti align-contenttakođer mogu povećati veličinu žlijeba i utjecati na stvarnu gapvrijednost.
U sljedećem primjeru postavljamo 1em, gapali, kao što vidite, između stavki ima puno više prostora, uzrokovano upotrebom distribuiranih poravnanja, poput justify-contenti align-content:
Podrška preglednika
Upiti za značajke obično su lijep način da provjerite podržava li preglednik određeno svojstvo, ali u ovom slučaju, ako provjerite postoji li gapsvojstvo u flexboxu, možete dobiti lažno pozitivno jer upit značajke neće razlikovati načine rasporeda. Drugim riječima, mogao bi biti podržan u fleks rasporedu koji rezultira pozitivnim rezultatom, ali zapravo nije podržan ako se koristi u rasporedu mreže.
Raspored rešetke
| IE | Rub | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Ne | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Android preglednik | Chrome za Android | Firefox za Android |
|---|---|---|---|---|
| 12+ | Ne | 81+ | 84+ | 68+ |
Raspored mreže s vrijednostima calc ()
| IE | Rub | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Ne | 84+ | 79+ | 84+ | Ne | 69+ |
| iOS Safari | Opera Mobile | Android preglednik | Chrome za Android | Firefox za Android |
|---|---|---|---|---|
| Ne | Ne | 81+ | 84+ | 68+ |
Raspored mreže s postotnom vrijednošću
| IE | Rub | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Ne | 84+ | 79+ | 84+ | Ne | 69+ |
| iOS Safari | Opera Mobile | Android preglednik | Chrome za Android | Firefox za Android |
|---|---|---|---|---|
| Ne | Ne | 81+ | 84+ | 68+ |
Flex raspored
Specifikacija za upotrebu gaps flexboxom trenutno je u statusu Working Draft.
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 84 | 63 | Ne | 84 | TP |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Ne | Ne |
Izgled više stupaca
| IE | Rub | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Ne | 84+ | 79+ | 84+ | Ne | 69+ |
| iOS Safari | Opera Mobile | Android preglednik | Chrome za Android | Firefox za Android |
|---|---|---|---|---|
| Ne | Ne | 81+ | 84+ | 68+ |
Više informacija
- CSS modul za poravnanje okvira razina 3
- Chromium dolazi do praznine u Flexboxu (ulaznica # 761904)
- Status značajke WebKit CSS
Povezano
- Raspored mreže
- Izgled Flexboxa
- Izgled više stupaca