Lõhe vara CSS on lühem row-gapja column-gap, täpsustades suurus vihmaveetorude, mis on ruumi ridade ja veergude jooksul grid, flex ja mitmeveerulise paigutusega.
/* 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; )
Kasutage gapatribuudi toimimiseks allpool toodud demo liugurit :
Süntaks
gap aktsepteerib ühte või kahte väärtust:
- Üks väärtus määrab mõlemad
row-gapjacolumn-gapsama väärtuse. - Kahe väärtuse kasutamisel seab esimene
row-gapja teine väärtusecolumn-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 Grid Layout mooduli spetsifikatsioon määratles grid-gapatribuudi abil ruudustikuradade vahelise ruumi . gapon mõeldud selle asendamiseks, nii et lünki saab määratleda mitmes CSS-i paigutusmeetodis, näiteks flexboxis, kuid grid-gapseda tuleb siiski kasutada juhtudel, kui brauser on võib-olla juurutanud, grid-gapkuid pole veel alustanud uuema gapatribuudi toetamist .
Väärtused
gap aktsepteerib järgmisi väärtusi:
normal: (Vaikimisi) Brauser määrab mitme veeru paigutuse jaoks kasutatud väärtuse 1em ja kõigi muude paigutusekontekstide (st ruudustiku ja painde) jaoks 0px.: Suvaline kehtiv ja mittenegatiivne CSS pikkus, nagupx,em,remja%, teiste hulgas.: Tühiku suurus kui mittenegatiivne protsentväärtus elemendi mõõtme suhtes. (Üksikasju vt allpool.)initial: Rakendab atribuudi vaikesätet, mis onnormal.inherit: Võtab vastu vanema lõhe väärtuse.unset: Eemaldab voolugapelemendist.
Protsentuaalsus pilu omadustes
Kui tühiku dimensiooni mahuti suurus on kindel, gaplahendab protsendid konteinerite sisukasti suuruse järgi mis tahes paigutustüüpides.
Teisisõnu, kui brauser teab konteineri suurust, saab ta arvutada protsendi väärtuse gap. Näiteks kui mahuti kõrgus on 100 pikslit ja väärtuseks gapseatakse 10%, teab brauser, et 10% 100px-st on 10px.
Kuid kui brauser ei tea suurust, siis tekib küsimus: "10% millest?" Nendel juhtudel gapkäitub paigutuse tüübist lähtuvalt erinevalt.
Võrguspaigutuses lahutatakse sisemise suuruse määramiseks protsendid nulli vastu, kuid kasti sisu paigutamisel lahutatakse elemendi sisukasti vastu, see tähendab, et see paneb üksuste vahele ruumi, kuid ruum ei mõjuta mahuti suurust.
Selles demos pole konteineri kõrgus kindel. Vaadake, mis juhtub, kui gapsuurust suurendate . Seejärel määrake gappiksliühikud ja proovige uuesti:
Paindliku paigutuse korral lahenevad protsendid kõigil juhtudel nulliga, mis tähendab, et lünki ei rakendata, kui konteineri suurus pole brauserile teada:
Funktsiooni calc () kasutamine tühimikuga
Võite kasutada calc()funktsiooni määrata suurust gap, kuid ajal seda kirjalikult, on mingit toetust see Safaris ja 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); )Näited
gapVara on mõeldud kasutamiseks grid, flex ja mitmeveerulise paigutusega. Vaatame mõningaid näiteid.
Võrgu paigutus
Järgmises demos näete, kuidas gapseda kasutatakse ruudustikukonteineri row-gapja column-gapomaduste määramiseks, määrates vastavalt ruudustikuvõrkude ridade ja veergude veerennid:
Paindlik paigutus
Pilu rakendamine paindmahuti põhiteljele näitab painduvate elementide vahelist kaugust painde paigutuse ühel real.
Siin column-gapkasutatakse järjestikku:
Siin row-gapkasutatakse veeru suunda:
Rakendades gapet rist telje kohta flex konteiner näitab vahe vahel flex read FLEX paigutuse.
Siin on row-gapreas suund:
Siin on column-gapveeru suund:
Mitme veeruga paigutus
column-gapilmub mitme veeru paigutustes, et luua veergude lahtrite vahel tühimikke, kuid pange tähele, et row-gapsellel pole mingit mõju, kuna töötame ainult veergudes. gapsaab selles kontekstis endiselt kasutada, kuid column-gaprakendatakse ainult tahet.
Nagu näete järgmises demos, on gapatribuudi väärtus 2rem, kuid eraldab üksused mõlema suuna asemel ainult horisontaalselt, kuna töötame veergudes.
Mida rohkem te teate ...
Varaga töötamise juures tasub tähelepanu pöörata paarile asjale gap.
See on tore viis soovimatute tühikute vältimiseks
Kas olete kunagi kasutanud veeriseid elementide vahele tühikute loomiseks? Kui me pole ettevaatlikud, võime enne ja pärast üksuste rühma saada lisavahesid.
Selle lahendamine nõuab tavaliselt negatiivsete veeriste lisamist või pseudoselektorite kasutamist, et konkreetsetest üksustest veeris eemaldada. Kuid gapmoodsamate paigutusmeetodite kasutamisel on tore see, et üksuste vahel on ruumi ainult. Lisakriipsutus alguses ja lõpus pole kunagi probleem!
Aga hei, kui soovite, et nende kasutamise ajal oleks ruumi esemete ümber gap, pange paddingkonteiner ümber nii:
.container ( display: flex; gap: 1rem; padding: 1rem; )Rennide suurus ei ole alati võrdne pilu väärtusega
gapVara ei ole ainus asi, mis võib panna ruumi vahel esemeid. Äärised, padjad justify-contentja align-contentvõivad ka vihmaveerenni suurust suurendada ja tegelikku gapväärtust mõjutada .
Järgmises näites, me määrates 1em gapkuid nagu näete, on palju rohkem ruumi vahel esemed, mis on tingitud sellest jagatud suundi, nagu justify-contentja align-content:
Brauseri tugi
Funktsioonipäringud on tavaliselt kena viis kontrollida, kas brauser toetab konkreetset atribuuti, kuid sellisel juhul gapvõidakse flexboxis atribuudi leidmisel saada valepositiiv, kuna funktsiooni päring ei erista paigutusrežiime. Teisisõnu võib seda toetada paindlik paigutus, mis annab positiivse tulemuse, kuid tegelikult ei toetata seda, kui seda kasutatakse ruudustiku paigutuses.
Võrgu paigutus
| IE | Edge | Firefox | Chrome | Safari | Ooper |
|---|---|---|---|---|---|
| Ei | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS-i Safari | Opera Mobile | Androidi brauser | Chrome Androidile | Firefox Androidile |
|---|---|---|---|---|
| 12+ | Ei | 81+ | 84+ | 68+ |
Võrgu paigutus koos calc () väärtustega
| IE | Edge | Firefox | Chrome | Safari | Ooper |
|---|---|---|---|---|---|
| Ei | 84+ | 79+ | 84+ | Ei | 69+ |
| iOS-i Safari | Opera Mobile | Androidi brauser | Chrome Androidile | Firefox Androidile |
|---|---|---|---|---|
| Ei | Ei | 81+ | 84+ | 68+ |
Võrgu paigutus protsentväärtusega
| IE | Edge | Firefox | Chrome | Safari | Ooper |
|---|---|---|---|---|---|
| Ei | 84+ | 79+ | 84+ | Ei | 69+ |
| iOS-i Safari | Opera Mobile | Androidi brauser | Chrome Androidile | Firefox Androidile |
|---|---|---|---|---|
| Ei | Ei | 81+ | 84+ | 68+ |
Paindlik paigutus
gapFlexboxiga kasutamise spetsifikatsioon on praegu töövormingu olekus.
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 84 | 63 | Ei | 84 | TP |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | Ei | Ei |
Mitme veeruga paigutus
| IE | Edge | Firefox | Chrome | Safari | Ooper |
|---|---|---|---|---|---|
| Ei | 84+ | 79+ | 84+ | Ei | 69+ |
| iOS-i Safari | Opera Mobile | Androidi brauser | Chrome Androidile | Firefox Androidile |
|---|---|---|---|---|
| Ei | Ei | 81+ | 84+ | 68+ |
Rohkem informatsiooni
- CSS-i kasti joondamise moodul 3. tase
- Kroom maandus Flexboxi pilusse (pilet nr 761904)
- WebKit CSS-i funktsioonide olek
Seotud
- Võrgu paigutus
- Flexboxi paigutus
- Mitme veeruga paigutus