Lastnost vrzeli v CSS je okrajšava za row-gapin column-gap, ki določa velikost žlebov, kar je prostor med vrsticami in stolpci v postavitvah mreže, fleksa in več stolpcev.
/* 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; )
Z drsnikom v spodnji predstavitvi si oglejte gaplastnost v akciji:
Sintaksa
gap sprejme eno ali dve vrednosti:
- Ena vrednost nastavi obe vrednosti
row-gapincolumn-gapisto vrednost. - Ko sta uporabljeni dve vrednosti, prva nastavi,
row-gapdruga pacolumn-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 modul postavitve mreže CSS je z grid-gaplastnostjo opredelila prostor med mrežnimi skladbami . gapnaj bi ga nadomestil, tako da je mogoče vrzeli določiti v več metodah postavitve CSS, kot je flexbox, vendar ga je grid-gapše vedno treba uporabiti v primerih, ko je brskalnik že implementiral, grid-gapvendar še ni začel podpirati novejše gaplastnosti.
Vrednote
gap sprejema naslednje vrednosti:
normal: (Privzeto) Brskalnik bo določil uporabljeno vrednost 1em za postavitev z več stolpci in 0px za vse druge kontekste postavitve (npr. Mrežo in upogibanje).: Vsak veljaven in brez negativnih dolžina CSS, kot sopx,em,remin%, med drugim.: Velikost vrzeli kot negativna odstotna vrednost glede na dimenzijo elementa. (Za podrobnosti glejte spodaj.)initial: Uporabi privzeto nastavitev lastnosti, ki jenormal.inherit: Sprejme vrednost vrzeli nadrejenega.unset: Odstrani tokgapiz elementa.
Odstotki v lastnostih vrzeli
Ko je velikost vsebnika v dimenziji vrzeli določena, gaprazdeli odstotke glede na velikost polja z vsebino vsebnika v kateri koli vrsti postavitve.
Z drugimi besedami, ko brskalnik pozna velikost vsebnika, lahko izračuna odstotno vrednost gap. Če je na primer višina vsebnika 100 slikovnih pik in gapje nastavljena na 10%, brskalnik ve, da je 10 odstotkov 100 slikovnih pik 10 slikovnih pik.
Ko pa brskalnik ne ve velikosti, se bo vprašal: "10% česa?" V teh primerih se gapobnaša drugače glede na vrsto postavitve.
V postavitvi mreže se odstotki ločijo proti ničli za določanje lastnih prispevkov velikosti, vendar se razrešijo glede na polje z vsebino elementa, ko razporejajo vsebino polja, kar pomeni, da bo postavil presledek med elementi, vendar presledek ne vpliva na velikost vsebnika.
V tej predstavitvi višina vsebnika ni določena. Oglejte si, kaj se zgodi, ko povečate gapvelikost. Nato nastavite gapenote v slikovnih pikah in poskusite znova:
Pri fleksibilni postavitvi se odstotki v vseh primerih razrešijo na nič, kar pomeni, da vrzeli ne bodo veljale, če brskalnik ne ve velikosti vsebnika:
Uporaba funkcije calc () z vrzeljo
S calc()funkcijo lahko določite velikost, gapvendar v času pisanja tega v Safariju in iOS-u ni na voljo.
.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); )Primeri
gapLastnost je namenjen za uporabo v omrežja, flex in multi-stolpec postavitev. Oglejmo si nekaj primerov.
Postavitev mreže
V naslednjem predstavitvenem prikazu lahko vidite, kako gapse uporablja za določanje lastnosti row-gapin column-gaplastnosti mrežnega vsebnika, pri čemer definirate žlebove med mrežnimi vrsticami in stolpci mreže:
Prožna postavitev
Uporaba reže na glavno os fleksibilnega vsebnika označuje razmik med fleksibilnimi elementi v eni vrstici fleks postavitve.
Tukaj se column-gapuporablja v smeri vrstic:
Tukaj se row-gapuporablja v smeri stolpca:
Uporaba gapna prečni osi fleks posode označuje razmik med upogibnimi črtami upogibne postavitve.
Tu je row-gapsmer v vrsti:
Tukaj je column-gapv smeri stolpca:
Postavitev več stolpcev
column-gapse prikaže v postavitvah z več stolpci, da ustvari vrzeli med polji stolpcev, vendar upoštevajte, da row-gapto nima učinka, saj delamo samo v stolpcih. gapše vedno mogoče uporabiti v tem kontekstu, vendar column-gapbo uporabljen samo znak .
Kot lahko vidite v naslednji predstavitvi, čeprav ima gaplastnost vrednost 2rem, ločuje elemente le vodoravno namesto v obe smeri, saj delamo v stolpcih:
Več ko veš ...
Pri delu z gapnepremičnino je treba omeniti nekaj stvari .
To je lep način za preprečevanje neželenih razmikov
Ste že kdaj uporabili robove za ustvarjanje razmika med elementi? Če nismo previdni, lahko dobimo dodaten razmik pred in za skupino elementov.
Reševanje, ki običajno zahteva dodajanje negativnih robov ali poseganje po psevdo-izbirnikih za odstranitev roba iz določenih postavk. Lepo pri uporabi gapv sodobnejših načinih postavitve pa je, da imate med predmeti le prostor. Odvečna zaloga na začetku in koncu ni nikoli težava!
Ampak, če hočeš imeti prostor med predmeti med uporabo gap, paddingposodo postavi tako:
.container ( display: flex; gap: 1rem; padding: 1rem; )Velikost žleba ni vedno enaka vrednosti reže
The gap property is not the only thing that can put space between items. Margins, paddings, justify-content and align-content can also increase the size of the gutter and affect the actual gap value.
In the following example, we’re setting a 1em gap but, as you can see, there is much more space between the items, caused by the use of distributed alignments, like justify-content and align-content:
Browser support
Feature queries are usually a nice way to check if a browser supports a specific property, but in this case, if you check for the gap property in flexbox, you may get a false positive because a feature query won’t distinguish between layout modes. In other words, it might be supported in a flex layout which results in a positive result, but it is actually not supported if it’s used in a grid layout.
Grid layout
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| No | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Android Browser | Chrome for Android | Firefox for Android |
|---|---|---|---|---|
| 12+ | No | 81+ | 84+ | 68+ |
Grid layout with calc() values
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| No | 84+ | 79+ | 84+ | No | 69+ |
| iOS Safari | Opera Mobile | Android Browser | Chrome for Android | Firefox for Android |
|---|---|---|---|---|
| No | No | 81+ | 84+ | 68+ |
Grid layout with percentage value
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| No | 84+ | 79+ | 84+ | No | 69+ |
| iOS Safari | Opera Mobile | Android Browser | Chrome for Android | Firefox for Android |
|---|---|---|---|---|
| No | No | 81+ | 84+ | 68+ |
Flex layout
The specification for using gap with flexbox is currently in Working Draft status.
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 84 | 63 | Ne | 84 | TP |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Ne | Ne |
Postavitev več stolpcev
| IE | Rob | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ne | 84+ | 79+ | 84+ | Ne | 69+ |
| iOS Safari | Opera Mobile | Brskalnik Android | Chrome za Android | Firefox za Android |
|---|---|---|---|---|
| Ne | Ne | 81+ | 84+ | 68+ |
Več informacij
- Modul za poravnavo polja CSS 3. stopnja
- Chromium pristane na vrzeli Flexbox (vstopnica # 761904)
- Status funkcije WebKit CSS
Sorodno
- Postavitev mreže
- Postavitev Flexbox
- Postavitev več stolpcev