CSS spragų savybė yra sutrumpinimas row-gapir column-gap, nurodant latakų dydį, kuris yra tarpas tarp eilučių ir stulpelių tinklelio, lankstumo ir kelių stulpelių išdėstymuose.
/* 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; )
Norėdami pamatyti gapnuosavybę, naudokite žemiau pateiktoje demonstracijoje esantį slankiklį :
Sintaksė
gap priima vieną ar dvi reikšmes:
- Viena reikšmė nustato
row-gapircolumn-gaptą pačią vertę. - Kai naudojamos dvi reikšmės, pirmasis nustato,
row-gapo antrasis - reikšmęcolumn-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%; */ )CSS tinklelio išdėstymo modulio specifikacijoje buvo apibrėžtas tarpas tarp tinklelio takelių naudojant grid-gapypatybę. gapyra skirtas jį pakeisti, kad spragas būtų galima apibrėžti keliais CSS išdėstymo metodais, pvz., „flexbox“, tačiau grid-gapvis tiek reikia naudoti tais atvejais, kai naršyklė galbūt įdiegė, grid-gapbet dar nepradėjo palaikyti naujesnės gapypatybės.
Vertybės
gap priima šias vertes:
normal: (Numatytasis) Naršyklė nurodys naudojamą 1em reikšmę kelių stulpelių išdėstymui ir 0px visiems kitiems išdėstymo kontekstams (ty tinkleliui ir „flex“).: Bet galioja ir ne neigiami CSS ilgis, pavyzdžiuipx,em,remir%, be kita ko.: Spragos dydis kaip neigiama procentinė vertė, palyginti su elemento matmeniu. (Išsamesnės informacijos žr. Toliau.)initial: Taiko numatytąjį nuosavybės nustatymą, kuris yranormal.inherit: Priima tėvų spragos vertę.unset: Pašalina srovęgapiš elemento.
Procentai tarpų savybėse
Kai tarpo matmens konteinerio dydis yra apibrėžtas, gapprocentai sprendžiami atsižvelgiant į bet kokio tipo išdėstymo talpyklos turinio langelio dydį.
Kitaip tariant, kai naršyklė žino konteinerio dydį, ji gali apskaičiuoti procentinę konteinerio vertę gap. Pvz., Kai talpyklos aukštis yra 100 taškų ir gapnustatytas 10%, naršyklė žino, kad 10% 100 taškų yra 10 taškų.
Bet kai naršyklė nežino dydžio, ji nustebs: „10% ko?“ Šiais atvejais gapelgiasi skirtingai, atsižvelgiant į išdėstymo tipą.
Tinklelio išdėstyme procentai skiriasi nuo nulio nustatant vidinio dydžio įnašus, tačiau išdėstant elemento turinio laukelį, išdėstant langelio turinį, tai reiškia, kad tarp elementų bus vietos, tačiau tarpas neturi įtakos talpyklos dydžiui.
Šioje demonstracijoje konteinerio aukštis nėra apibrėžtas. Pažiūrėkite, kas nutiks padidinus gapdydį. Tada nustatykite gaptaškų vienetus ir bandykite dar kartą:
Taikant lanksčią schemą, procentai visais atvejais sutampa su nuliu, o tai reiškia, kad spragos nebus taikomos, kai talpyklos dydis nežinomas naršyklei:
Naudojant funkciją calc () su tarpu
calc()Funkciją galite naudoti norėdami nurodyti dydžio dydį, gaptačiau šio rašymo metu „Safari“ ir „iOS“ jos nepalaiko .
.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); )Pavyzdžiai
gapTurtas skirtas naudoti Grid Flex ir kelių stulpelių maketai. Pažiūrėkime keletą pavyzdžių.
Tinklelio išdėstymas
Šiame demonstraciniame puslapyje galite pamatyti, gapkaip naudojamas nurodyti tinklelio konteinerio row-gapir column-gapypatybes, apibrėžiant latakus tarp tinklelio eilučių ir tinklelio stulpelių:
Lankstus išdėstymas
Taikant tarpą pagrindinei lankstumo talpyklos ašiai , nurodomas atstumas tarp lankstumo elementų vienoje lankstaus išdėstymo eilutėje.
Čia column-gapnaudojama eilės kryptimi:
Tai row-gapnaudojama stulpelio kryptimi:
Taikant gapį kompleksinio ašies iš Flex konteinerio rodo, tarpai tarp mišrius linijų Flex išdėstymą.
Štai row-gapeilės kryptimi:
Čia column-gapyra stulpelio kryptis:
Kelių stulpelių išdėstymas
column-gaprodomas kelių stulpelių išdėstymuose, kad susidarytų tarpai tarp stulpelių laukelių, tačiau atkreipkite dėmesį, kad row-gaptai neturi jokios įtakos, nes dirbame tik stulpeliuose. gapvis tiek gali būti naudojamas šiame kontekste, tačiau column-gapbus taikoma tik valia.
Kaip matote kitoje demonstracijoje, nors gapnuosavybės vertė yra 2rem, elementai atskiriami tik horizontaliai, o ne abi kryptys, nes dirbame stulpeliuose:
Kuo daugiau žinai…
Yra keletas dalykų, į kuriuos verta atkreipti dėmesį dirbant su gapturtu.
Tai puikus būdas išvengti nepageidaujamų tarpų
Ar kada nors naudojate paraštes, kad sukurtumėte tarpą tarp elementų? Jei nesame atsargūs, galime pridėti papildomų tarpų prieš ir po elementų grupės.
Norėdami tai išspręsti, paprastai reikia pridėti neigiamas paraštes arba kreiptis į pseudo selektorius, kad pašalintumėte maržą iš konkrečių elementų. Bet malonu naudoti gapšiuolaikiškesnius išdėstymo metodus yra tai, kad tarp daiktų turite tik vietos. Papildomas greitis pradžioje ir pabaigoje niekada nėra problema!
Bet, jei norite, kad naudodamiesi paliktų vietos aplink daiktus gap, paddingaplink konteinerį padėkite taip:
.container ( display: flex; gap: 1rem; padding: 1rem; )Latako dydis ne visada yra lygus tarpo vertei
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.
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 84 | 63 | Ne | 84 | TP |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | Ne | Ne |
Kelių stulpelių išdėstymas
| T.Y | Briauna | „Firefox“ | „Chrome“ | „Safari“ | Opera |
|---|---|---|---|---|---|
| Ne | 84+ | 79+ | 84+ | Ne | 69+ |
| „iOS Safari“ | „Opera Mobile“ | „Android“ naršyklė | „Android“ skirta „Chrome“ | „Firefox“, skirta „Android“ |
|---|---|---|---|---|
| Ne | Ne | 81+ | 84+ | 68+ |
Daugiau informacijos
- 3 lygio CSS dėžutės derinimo modulis
- „Chromium“ patenka į „Flexbox“ spragą (bilieto Nr. 761904)
- „WebKit CSS“ funkcijos būsena
Susijęs
- Tinklelio išdėstymas
- „Flexbox“ išdėstymas
- Kelių stulpelių išdėstymas