Gapegenskaben i CSS er en stenografi for row-gapog column-gapangiver størrelsen på tagrender, hvilket er mellemrummet mellem rækker og kolonner inden for gitter-, flex- og multi-kolonnelayout.
/* 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; )
Brug skyderen i demoen nedenfor for at se gapejendommen i aktion:
Syntaks
gap accepterer en eller to værdier:
- En enkelt værdi indstiller både
row-gapogcolumn-gapmed den samme værdi. - Når der bruges to værdier, indstiller den første den
row-gapog den anden indstiller dencolumn-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%; */ )Specifikationen for CSS Grid Layout Module definerede afstanden mellem gitterspor ved hjælp af grid-gapegenskaben. gaper beregnet til at erstatte det, så huller kan defineres i flere CSS-layoutmetoder, som flexbox, men skal grid-gapstadig bruges i tilfælde, hvor en browser muligvis har implementeret, grid-gapmen endnu ikke er begyndt at understøtte den nyere gapejendom.
Værdier
gap accepterer følgende værdier:
normal: (Standard) Browseren angiver en brugt værdi på 1 em for layout med flere kolonner og 0 pixel for alle andre layoutkontekster (dvs. gitter og flex).: Enhver gyldig og ikke-negativ CSS længde, såsompx,em,remog%, blandt andre.: Gapens størrelse som en ikke-negativ procentværdi i forhold til elementets dimension. (Se nedenfor for detaljer.)initial: Anvender egenskabens standardindstilling, som ernormal.inherit: Vedtager forældrenes mellemrumsværdi.unset: Fjerner strømmengapfra elementet.
Procentdele i spalteegenskaber
Når størrelsen på en container i afstandsdimensionen er bestemt, gapløses procentdele i forhold til størrelsen på containerens indholdsfelt i alle layouttyper.
Med andre ord, når browseren kender størrelsen på containeren, kan den beregne den procentvise værdi af gap. For eksempel, når containerens højde er 100 pixel, og den gaper indstillet til 10%, ved browseren, at 10% af 100 pixel er 10 pixel.
Men når browseren ikke kender størrelsen, vil den undre sig, "10% af hvad?" I disse tilfælde gapopfører de sig forskelligt baseret på layouttypen.
I et gitterlayout løses procenter mod nul til bestemmelse af indre størrelsesbidrag, men løses i forhold til elementets indholdsfelt, når boksens indhold lægges ud, hvilket betyder, at det placerer plads mellem elementerne, men rummet påvirker ikke beholderens størrelse.
I denne demo er containerens højde ikke bestemt. Se hvad der sker, når du øger gapstørrelsen. Indstil derefter gappixel-enhederne, og prøv igen:
I et flexlayout løses procenter i alle tilfælde mod nul, hvilket betyder, at huller ikke gælder, når størrelsen på containeren ikke er kendt for browseren:
Brug af calc () -funktionen med mellemrum
Du kan bruge calc()funktionen til at angive størrelsen på, gapmen på tidspunktet for denne skrivning er der ingen understøttelse af det på Safari og 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); )Eksempler
Den gapegenskab er beregnet til brug i grid, flex og multi-kolonne layouts. Lad os tjekke nogle eksempler.
Gitterlayout
I den følgende demo kan du se gapbrugt til at specificere row-gapog column-gapegenskaber på en gitterbeholder, der definerer tagrenderne henholdsvis gitterrækker og gitterkolonner:
Flex layout
Anvendelse af kløft til hovedaksen i en flexcontainer angiver afstanden mellem flexartikler i en enkelt linje i flexlayoutet.
Her column-gapbruges i en rækkeretning:
Her row-gapbruges i en kolonneretning:
Anvendelse gappå tværsaksen af en flexcontainer angiver afstanden mellem flexlinjerne i flexlayoutet.
Her er row-gapi en rækkeretning:
Her er column-gapi en kolonneretning:
Layout med flere søjler
column-gapvises i flerkolonnelayouter for at skabe huller mellem kolonnekasser, men bemærk, at det ikke row-gaphar nogen effekt, da vi kun arbejder i kolonner. gapkan stadig bruges i denne sammenhæng, men kun column-gapvil blive anvendt.
Som du kan se i den næste demo, skønt gapejendommen har en værdi på 2rem, adskiller den kun elementer vandret i stedet for begge retninger, da vi arbejder i kolonner:
Jo mere du ved ...
Der er et par ting, der er værd at bemærke ved at arbejde med gapejendommen.
Det er en god måde at forhindre uønsket afstand på
Har du nogensinde brugt margener til at skabe afstand mellem elementer? Hvis vi ikke er forsigtige, kan vi ende med ekstra afstand før og efter varegruppen.
Løsning, der normalt kræver tilføjelse af negative margener eller anvendelse af pseudovælgere for at fjerne margen fra bestemte emner. Men det pæne ved at bruge gapmere moderne layoutmetoder er, at du kun har plads mellem emnerne. Den ekstra cruft i starten og slutningen er aldrig et problem!
Men hej, hvis du vil have plads omkring emnerne, mens du bruger det gap, skal du lægge det paddingrundt om containeren som denne:
.container ( display: flex; gap: 1rem; padding: 1rem; )Tagrendens størrelse er ikke altid lig med mellemrumsværdien
Den gapEjendommen er ikke den eneste, der kan sætte mellemrum mellem elementer. Margener, polstringer justify-contentog align-contentkan også øge tagrenden og påvirke den aktuelle gapværdi.
I det følgende eksempel sætter vi et 1em, gapmen som du kan se, er der meget mere plads mellem elementerne, forårsaget af brugen af distribuerede justeringer, som justify-contentog align-content:
Browsersupport
Funktionsforespørgsler er normalt en god måde at kontrollere, om en browser understøtter en bestemt egenskab, men i dette tilfælde, hvis du søger efter gapejendommen i flexbox, kan du få en falsk positiv, fordi en funktionsforespørgsel ikke skelner mellem layouttilstande. Med andre ord understøttes det muligvis i et flex-layout, hvilket resulterer i et positivt resultat, men det understøttes faktisk ikke, hvis det bruges i et gitterlayout.
Gitterlayout
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ingen | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Android-browser | Chrome til Android | Firefox til Android |
|---|---|---|---|---|
| 12+ | Ingen | 81+ | 84+ | 68+ |
Gitterlayout med calc () -værdier
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ingen | 84+ | 79+ | 84+ | Ingen | 69+ |
| iOS Safari | Opera Mobile | Android-browser | Chrome til Android | Firefox til Android |
|---|---|---|---|---|
| Ingen | Ingen | 81+ | 84+ | 68+ |
Gitterlayout med procentværdi
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ingen | 84+ | 79+ | 84+ | Ingen | 69+ |
| iOS Safari | Opera Mobile | Android-browser | Chrome til Android | Firefox til Android |
|---|---|---|---|---|
| Ingen | Ingen | 81+ | 84+ | 68+ |
Flex layout
Specifikationen til brug gapmed flexbox er i øjeblikket i Working Draft-status.
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 84 | 63 | Ingen | 84 | TP |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Ingen | Ingen |
Layout med flere søjler
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ingen | 84+ | 79+ | 84+ | Ingen | 69+ |
| iOS Safari | Opera Mobile | Android-browser | Chrome til Android | Firefox til Android |
|---|---|---|---|---|
| Ingen | Ingen | 81+ | 84+ | 68+ |
Mere information
- CSS Box Alignment Module niveau 3
- Chromium får Flexbox-hul (billet nr. 761904)
- WebKit CSS-funktionsstatus
Relaterede
- Gitterlayout
- Flexbox-layout
- Layout med flere søjler