Proprietatea gap în CSS este o prescurtare pentru row-gapși column-gap, specificând dimensiunea jgheaburilor, care este spațiul dintre rânduri și coloane în structurile grilă, flex și multi-coloană.
/* 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; )
Utilizați glisorul din demonstrația de mai jos pentru a vedea gapproprietatea în acțiune:
Sintaxă
gap acceptă una sau două valori:
- O singură valoare setează ambele
row-gapșicolumn-gapaceeași valoare. - Când se utilizează două valori, prima setează
row-gapși a doua setează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%; */ )Specificația pentru CSS Grid Layout Module a definit spațiul dintre urmele de grilă folosind grid-gapproprietatea. gapeste destinat să-l înlocuiască, astfel încât lacunele să poată fi definite în mai multe metode de aspect CSS, cum ar fi flexbox, dar grid-gaptotuși trebuie utilizat în cazurile în care un browser poate fi implementat, grid-gapdar încă nu a început să accepte noua gapproprietate.
Valori
gap acceptă următoarele valori:
normal: (Implicit) Browserul va specifica o valoare utilizată de 1em pentru aspectul cu mai multe coloane și 0px pentru toate celelalte contexte de aspect (de exemplu, grilă și flex).: Orice lungime valid CSS și non-negativ, cum ar fipx,em,remși%, printre altele.: Dimensiunea decalajului ca valoare procentuală non-negativă în raport cu dimensiunea elementului. (Vezi mai jos pentru detalii.)initial: Aplică setarea implicită a proprietății, care estenormal.inherit: Adoptă valoarea gap a părintelui.unset: Elimină curentulgapdin element.
Procente în proprietățile gap
Când dimensiunea unui container din dimensiunea gap este definitivă, gapse rezolvă procentele față de dimensiunea casetei de conținut a containerului în orice tip de aspect.
Cu alte cuvinte, atunci când browserul cunoaște dimensiunea containerului, poate calcula valoarea procentuală a gap. De exemplu, atunci când înălțimea containerului gapeste de 100 px și este setată la 10%, browserul știe că 10% din 100 px este 10 px.
Dar când browserul nu cunoaște dimensiunea, se va întreba „10% din ce?” În aceste cazuri, gapse comportă diferit în funcție de tipul de aspect.
Într-un aspect de grilă, procentele se rezolvă față de zero pentru determinarea contribuțiilor de dimensiune intrinsecă, dar se rezolvă în funcție de caseta de conținut a elementului atunci când se prezintă conținutul casetei, ceea ce înseamnă că va pune spațiu între articole, dar spațiul nu afectează dimensiunea containerului.
În această demonstrație, înălțimea containerului nu este definită. Vedeți ce se întâmplă când creșteți gapdimensiunea. Apoi setați gapunitățile în pixeli și încercați din nou:
Într-un aspect flexibil, procentele se rezolvă față de zero în toate cazurile, ceea ce înseamnă că golurile nu se vor aplica atunci când browserul nu cunoaște dimensiunea containerului:
Folosind funcția calc () cu gap
Puteți utiliza calc()funcția pentru a specifica dimensiunea gapfișierului, dar, în momentul redactării acestui articol, nu există suport pentru acesta pe Safari și 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); )Exemple
gapProprietatea este proiectat pentru a fi utilizat în rețele, flex și mai multe coloane machete. Să vedem câteva exemple.
Aspectul grilei
În următoarea demonstrație, puteți vedea gapcă este folosit pentru a specifica row-gapși column-gapproprietățile unui container de grilă, definind jgheaburile dintre rândurile de grilă și respectiv coloanele de grilă:
Aspect flexibil
Aplicarea decalajului pe axa principală a unui container flex indică distanța dintre elementele flexibile într-o singură linie a aspectului flex.
Aici este column-gapfolosit într-o direcție de rând:
Aici este row-gapfolosit în direcția coloanei:
Aplicarea gappe axa transversală a unui container flexibil indică distanța între liniile flexibile ale aspectului flex.
Iată row-gapîntr-o direcție de rând:
Iată column-gapîntr-o direcție de coloană:
Aspect cu mai multe coloane
column-gapapare în aspectele cu mai multe coloane pentru a crea goluri între casetele de coloane, dar rețineți că row-gapnu are efect, deoarece lucrăm doar în coloane. gappoate fi încă folosit în acest context, dar numai column-gapva fi aplicat.
După cum puteți vedea în următoarea demonstrație, deși gapproprietatea are o valoare de 2rem, separă elementele doar pe orizontală în loc de ambele direcții, deoarece lucrăm în coloane:
Cu cat stii mai mult…
Există câteva lucruri demne de remarcat despre lucrul cu gapproprietatea.
Este un mod frumos de a preveni spațierea nedorită
Ați folosit vreodată margini pentru a crea spațierea între elemente? Dacă nu suntem atenți, putem ajunge la o distanță suplimentară înainte și după grupul de articole.
Rezolvarea care necesită de obicei adăugarea de marje negative sau recurgerea la pseudo-selectoare pentru a elimina marja de la anumite elemente. Dar ceea ce este frumos la utilizarea gapîn metode de aspect mai moderne este că aveți doar spațiu între articole. Incrucișarea suplimentară la început și sfârșit nu este niciodată o problemă!
Dar, hei, dacă doriți să aveți spațiu în jurul articolelor în timp ce utilizați gap, puneți în paddingjurul containerului astfel:
.container ( display: flex; gap: 1rem; padding: 1rem; )Dimensiunea jgheabului nu este întotdeauna egală cu valoarea decalajului
gapProprietatea nu este singurul lucru care poate pune spațiu între elemente. Marginile, căptușelile justify-contentși , de align-contentasemenea, pot crește dimensiunea jgheabului și pot afecta gapvaloarea reală .
În exemplul următor, setăm un 1em gap, dar, după cum puteți vedea, există mult mai mult spațiu între elemente, cauzat de utilizarea alinierilor distribuite, cum ar fi justify-contentși align-content:
Suport pentru browser
Interogările cu funcții sunt, de obicei, un mod frumos de a verifica dacă un browser acceptă o anumită proprietate, dar în acest caz, dacă verificați gapproprietatea din flexbox, puteți obține un fals pozitiv, deoarece o interogare cu caracteristică nu va distinge între modurile de aspect. Cu alte cuvinte, ar putea fi acceptat într-un aspect flexibil care are ca rezultat un rezultat pozitiv, dar de fapt nu este acceptat dacă este utilizat într-un aspect de grilă.
Aspectul grilei
| IE | Margine | Firefox | Crom | Safari | Operă |
|---|---|---|---|---|---|
| Nu | Peste 16 ani | Peste 61 de ani | 66+ | 12+ | Peste 53 de ani |
| Safari iOS | Opera Mobile | Browser Android | Chrome pentru Android | Firefox pentru Android |
|---|---|---|---|---|
| 12+ | Nu | Peste 81 de ani | 84+ | Peste 68 de ani |
Aspectul grilei cu valori calc ()
| IE | Margine | Firefox | Crom | Safari | Operă |
|---|---|---|---|---|---|
| Nu | 84+ | Peste 79 de ani | 84+ | Nu | Peste 69 de ani |
| Safari iOS | Opera Mobile | Browser Android | Chrome pentru Android | Firefox pentru Android |
|---|---|---|---|---|
| Nu | Nu | Peste 81 de ani | 84+ | Peste 68 de ani |
Aspectul grilei cu valoare procentuală
| IE | Margine | Firefox | Crom | Safari | Operă |
|---|---|---|---|---|---|
| Nu | 84+ | Peste 79 de ani | 84+ | Nu | Peste 69 de ani |
| Safari iOS | Opera Mobile | Browser Android | Chrome pentru Android | Firefox pentru Android |
|---|---|---|---|---|
| Nu | Nu | Peste 81 de ani | 84+ | Peste 68 de ani |
Aspect flexibil
Specificația pentru utilizarea gapcu flexbox este în prezent în starea de schiță de lucru.
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 84 | 63 | Nu | 84 | TP |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | Nu | Nu |
Aspect cu mai multe coloane
| IE | Margine | Firefox | Crom | Safari | Operă |
|---|---|---|---|---|---|
| Nu | 84+ | Peste 79 de ani | 84+ | Nu | Peste 69 de ani |
| Safari iOS | Opera Mobile | Browser Android | Chrome pentru Android | Firefox pentru Android |
|---|---|---|---|---|
| Nu | Nu | Peste 81 de ani | 84+ | Peste 68 de ani |
Mai multe informatii
- Modulul de aliniere a casetei CSS Nivelul 3
- Chromium aterizează golul Flexbox (Biletul nr. 761904)
- Stare caracteristică WebKit CSS
Legate de
- Aspectul grilei
- Aspect Flexbox
- Aspect în mai multe coloane