De gap-eigenschap in CSS is een afkorting voor row-gapen column-gap, die de grootte van goten specificeert, wat de ruimte is tussen rijen en kolommen binnen raster-, flex- en multi-kolomlay-outs.
/* 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; )
Gebruik de schuifregelaar in de onderstaande demo om de gapwoning in actie te zien:
Syntaxis
gap accepteert een of twee waarden:
- Een enkele waarde stelt beide
row-gapencolumn-gapmet dezelfde waarde in. - Wanneer twee waarden worden gebruikt, stelt de eerste de in
row-gapen stelt de tweede de incolumn-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%; */ )De specificatie voor de CSS Grid Layout Module definieerde de ruimte tussen grid tracks met behulp van de grid-gapeigenschap. gapis bedoeld om het te vervangen, zodat hiaten kunnen worden gedefinieerd in meerdere CSS-lay-outmethoden, zoals flexbox, maar grid-gapnog steeds moet worden gebruikt in gevallen waarin een browser mogelijk is geïmplementeerd, grid-gapmaar nog moet beginnen met het ondersteunen van de nieuwere gapeigenschap.
Waarden
gap accepteert de volgende waarden:
normalpxemrem% (Zie hieronder voor details.)initialnormalinheritunsetgap
Percentages in gap-eigenschappen
Als de grootte van een container in de tussenruimte-dimensie definitief is, gapworden de percentages omgezet tegen de grootte van het inhoudsvak van de container in elk type lay-out.
Met andere woorden, wanneer de browser de grootte van de container kent, kan hij de procentuele waarde van de gap. Als de hoogte van de container bijvoorbeeld 100px is en de gapis ingesteld op 10%, weet de browser dat 10% van 100px 10px is.
Maar als de browser de grootte niet kent, vraagt hij zich af: "10% van wat?" gapGedraagt zich in deze gevallen anders op basis van het lay-outtype.
In een rasterlay-out lossen percentages zich op tegen nul voor het bepalen van bijdragen aan intrinsieke grootte, maar worden ze vergeleken met het inhoudvak van het element bij het opmaken van de inhoud van de doos, wat betekent dat er ruimte tussen items wordt geplaatst, maar de ruimte heeft geen invloed op de grootte van de container.
In deze demo is de hoogte van de container niet definitief. Kijk wat er gebeurt als je de gapmaat vergroot . Stel vervolgens het aantal gappixels in en probeer het opnieuw:
In een flexlay-out lossen percentages in alle gevallen op tegen nul, wat betekent dat hiaten niet van toepassing zijn wanneer de grootte van de container niet bekend is bij de browser:
De functie calc () gebruiken met gap
U kunt de calc()functie gebruiken om de grootte van de gapmap op te geven, maar op het moment van schrijven is er geen ondersteuning voor op Safari en iOS.
.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); )Voorbeelden
De gapwoning is ontworpen voor gebruik in grid-, flex- en multi-column lay-outs. Laten we enkele voorbeelden bekijken.
Raster-indeling
In de volgende demo kunt u zien dat het gapwordt gebruikt om de row-gapen column-gapeigenschappen op een rastercontainer te specificeren , waarbij de ruggen tussen rasterrijen en rasterkolommen respectievelijk worden gedefinieerd:
Flexibele indeling
Door een opening toe te passen op de hoofdas van een flexcontainer, wordt de afstand tussen flexitems in een enkele regel van de flexlay-out aangegeven.
Wordt column-gapin een rijrichting gebruikt:
Wordt in kolomrichting row-gapgebruikt:
Toepassing gapop de dwarsas van een flexcontainer geeft de afstand aan tussen flexlijnen van de flexlay-out.
Hier is row-gapin een rij richting:
Hier is column-gapin een kolomrichting:
Indeling met meerdere kolommen
column-gapverschijnt in lay-outs met meerdere kolommen om gaten tussen kolomvakken te creëren, maar houd er rekening mee dat row-gapdit geen effect heeft omdat we alleen in kolommen werken. gapkan in deze context nog steeds worden gebruikt, maar alleen de column-gapwordt toegepast.
Zoals je kunt zien in de volgende demo, hoewel de gapeigenschap een waarde heeft van 2rem, scheidt het items alleen horizontaal in plaats van in beide richtingen, omdat we in kolommen werken:
Hoe meer je weet…
Er zijn een paar dingen die het vermelden waard zijn bij het werken met het gaponroerend goed.
Het is een leuke manier om ongewenste tussenruimte te voorkomen
Heeft u ooit marges gebruikt om ruimte tussen elementen te creëren? Als we niet oppassen, kunnen we extra spaties voor en na de groep items krijgen.
Om dit op te lossen, moet u meestal negatieve marges toevoegen of uw toevlucht nemen tot pseudo-selectors om de marge van specifieke items te verwijderen. Maar het leuke van het gebruik gapin modernere lay-outmethoden is dat je alleen ruimte hebt tussen items. De extra cruft aan het begin en einde is nooit een probleem!
Maar goed, als je tijdens het gebruik ruimte wilt hebben rond de items gap, plaats je paddingdeze als volgt rond de container:
.container ( display: flex; gap: 1rem; padding: 1rem; )Gootmaat is niet altijd gelijk aan de spleetwaarde
De gapeigenschap is niet het enige dat ruimte tussen items kan plaatsen. Marges, vullingen justify-contenten align-contentkunnen ook de grootte van de goot vergroten en de werkelijke gapwaarde beïnvloeden .
In het volgende voorbeeld stellen we een 1em in, gapmaar zoals u kunt zien, is er veel meer ruimte tussen de items, veroorzaakt door het gebruik van gedistribueerde uitlijningen, zoals justify-contenten align-content:
Browser-ondersteuning
Functiequery's zijn meestal een leuke manier om te controleren of een browser een specifieke eigenschap ondersteunt, maar in dit geval, als u de gapeigenschap in flexbox controleert, krijgt u mogelijk een vals positief resultaat omdat een functiequery geen onderscheid maakt tussen lay-outmodi. Met andere woorden, het kan worden ondersteund in een flexibele lay-out wat resulteert in een positief resultaat, maar het wordt eigenlijk niet ondersteund als het wordt gebruikt in een rasterlay-out.
Raster-indeling
| D.W.Z | Rand | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nee | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Android-browser | Chrome voor Android | Firefox voor Android |
|---|---|---|---|---|
| 12+ | Nee | 81+ | 84+ | 68+ |
Rasterlay-out met calc () waarden
| D.W.Z | Rand | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nee | 84+ | 79+ | 84+ | Nee | 69+ |
| iOS Safari | Opera Mobile | Android-browser | Chrome voor Android | Firefox voor Android |
|---|---|---|---|---|
| Nee | Nee | 81+ | 84+ | 68+ |
Rasterlay-out met procentuele waarde
| D.W.Z | Rand | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nee | 84+ | 79+ | 84+ | Nee | 69+ |
| iOS Safari | Opera Mobile | Android-browser | Chrome voor Android | Firefox voor Android |
|---|---|---|---|---|
| Nee | Nee | 81+ | 84+ | 68+ |
Flexibele indeling
De specificatie voor gebruik gapmet flexbox bevindt zich momenteel in de status Working Draft.
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 84 | 63 | Nee | 84 | TP |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Nee | Nee |
Indeling met meerdere kolommen
| D.W.Z | Rand | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nee | 84+ | 79+ | 84+ | Nee | 69+ |
| iOS Safari | Opera Mobile | Android-browser | Chrome voor Android | Firefox voor Android |
|---|---|---|---|---|
| Nee | Nee | 81+ | 84+ | 68+ |
Meer informatie
- CSS Box Alignment Module Level 3
- Chromium landt Flexbox-gat (Ticket # 761904)
- WebKit CSS-functiestatus
Verwant
- Rasterlay-out
- Flexbox-indeling
- Indeling met meerdere kolommen