Spraugas īpašums CSS ir stenogrāfs row-gapun column-gap, norādot noteku lielumu, kas ir atstarpe starp rindām un kolonnām režģa, elastīgo un vairāku kolonnu izkārtojumos.
/* 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; )
Izmantojiet slīdni zemāk esošajā demonstrācijā, lai redzētu gapīpašumu darbībā:
Sintakse
gap pieņem vienu vai divas vērtības:
- Viena vērtība nosaka gan
row-gap, uncolumn-gapar to pašu vērtību. - Ja tiek izmantotas divas vērtības, pirmais iestata
row-gapun otraiscolumn-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 režģa izkārtojuma moduļa specifikācijā tika definēta atstarpe starp režģa celiņiem, izmantojot grid-gaprekvizītu. gapir paredzēts to aizstāt, lai trūkumus varētu definēt vairākās CSS izkārtojuma metodēs, piemēram, flexbox, taču tas grid-gapjoprojām ir jāizmanto gadījumos, kad pārlūkprogramma, iespējams, ir ieviesusi, grid-gapbet vēl nav jāsāk atbalstīt jaunāko gapīpašumu.
Vērtības
gap pieņem šādas vērtības:
normal: (Noklusējums) Pārlūkprogramma norādīs izmantoto vērtību 1em vairāku kolonnu izkārtojumam un 0px visiem pārējiem izkārtojuma kontekstiem (ti, režģis un elastīgums).: Jebkurš derīgs un nav negatīvs CSS garuma, piemērampx,em,remun%, cita starpā.: Atstarpes lielums kā nenegatīva procentuālā vērtība attiecībā pret elementa izmēru. (Sīkāku informāciju skatiet zemāk.)initial: Piemēro īpašuma noklusējuma iestatījumu, kas irnormal.inherit: Pieņem vecāku starpības vērtību.unset: Noņem strāvugapno elementa.
Procenti spraugas īpašībās
Ja konteinera izmērs atstarpes dimensijā ir noteikts, gapprocentus izšķir no konteinera satura lodziņa lieluma visos izkārtojuma veidos.
Citiem vārdiem sakot, kad pārlūkprogramma zina konteinera lielumu, tā var aprēķināt konteinera procentuālo vērtību gap. Piemēram, ja konteinera augstums ir 100 pikseļi un gapiestatīts uz 10%, pārlūks zina, ka 10% no 100 pikseļiem ir 10 pikseļi.
Bet, kad pārlūks nezina lielumu, tas brīnīsies: “10% no kā?” Šādos gadījumos gapizturas atšķirīgi, pamatojoties uz izkārtojuma tipu.
Režģa izkārtojumā procentuālās vērtības tiek pielīdzinātas nullei, lai noteiktu iekšējo izmēru ieguldījumu, bet izšķiras pret elementa satura lodziņu, izkārtojot lodziņa saturu, tas nozīmē, ka tas atstās vietu starp vienumiem, bet atstarpe neietekmē konteinera izmēru.
Šajā demonstrācijā konteinera augstums nav noteikts. Skatiet, kas notiek, palielinot gapizmēru. Pēc tam iestatiet gappikseļu vienībās un mēģiniet vēlreiz:
Elastīgā izkārtojumā visos gadījumos procenti tiek atrisināti pret nulli, tas nozīmē, ka nepilnības netiks piemērotas, ja pārlūkprogrammai nav zināms konteinera lielums:
Izmantojot funkciju calc () ar atstarpi
Funkciju var izmantot, calc()lai norādītu lielumu, gaptaču rakstīšanas laikā Safari un iOS to neatbalsta .
.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); )Piemēri
gapĪpašums ir paredzēts lietošanai tīkla, Flex un vairāku kolonnu izkārtojumu. Apskatīsim dažus piemērus.
Režģa izkārtojums
Šajā demonstrācijā jūs varat redzēt, kā gaptiek izmantoti režģa konteinera row-gapun column-gaprekvizītu norādīšanai, attiecīgi nosakot notekas starp režģa rindām un režģa kolonnām:
Elastīgs izkārtojums
Spraugas pieliekšana elastīgā konteinera galvenajai asij norāda atstarpi starp elastīgajiem priekšmetiem vienā elastīgā izkārtojuma rindā.
Šeit tiek column-gapizmantoti pēc kārtas:
Lūk row-gap, ko izmanto kolonnas virzienā:
Uzklāšana gapuz elastīgā konteinera šķērsass norāda atstarpi starp izkārtojuma izliekuma līnijām .
Lūk row-gap, pēc kārtas:
Lūk column-gapkolonnā virzienā:
Vairāku kolonnu izkārtojums
column-gapparādās vairāku sleju izkārtojumos, lai izveidotu atstarpes starp kolonnu lodziņiem, taču ņemiet vērā, ka row-gaptas neietekmē, jo mēs strādājam tikai kolonnās. gapjoprojām var izmantot šajā kontekstā, bet column-gaptiks piemērots tikai.
Kā redzams nākamajā demonstrācijā, lai gan gaprekvizīta vērtība ir 2rem, vienumi tiek atdalīti tikai horizontāli, nevis abos virzienos, jo mēs strādājam kolonnās:
Jo vairāk jūs zināt ...
Strādājot ar gapīpašumu, ir vērts atzīmēt pāris lietas .
Tas ir jauks veids, kā novērst nevēlamu atstarpi
Vai esat kādreiz izmantojis piemales, lai izveidotu atstarpi starp elementiem? Ja neesam uzmanīgi, mēs varam iegūt papildu atstarpes pirms un pēc vienumu grupas.
Lai atrisinātu šo problēmu, parasti ir jāpievieno negatīvas piemales vai jāpielieto pseidoselektori, lai noņemtu rezervi no konkrētiem priekšmetiem. Bet jauki, izmantojot gapmodernākas izkārtojuma metodes, ir tas, ka jums ir tikai vieta starp priekšmetiem. Papildu plosīšanās sākumā un beigās nekad nav problēma!
Bet, hei, ja lietošanas laikā vēlaties atstāt vietu ap priekšmetiem gap, paddingap konteineru novietojiet šādi:
.container ( display: flex; gap: 1rem; padding: 1rem; )Notekas lielums ne vienmēr ir vienāds ar atstarpes vērtību
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 pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 84. | 63 | Nē | 84. | TP |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Nē | Nē |
Vairāku kolonnu izkārtojums
| IE | Mala | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nē | 84+ | 79+ | 84+ | Nē | 69+ |
| iOS Safari | Opera Mobile | Android pārlūks | Chrome Android ierīcēm | Firefox Android ierīcēm |
|---|---|---|---|---|
| Nē | Nē | 81+ | 84+ | 68+ |
Vairāk informācijas
- CSS kastes izlīdzināšanas moduļa 3. līmenis
- Hroms nonāk Flexbox spraugā (biļete # 761904)
- WebKit CSS funkciju statuss
Saistīts
- Režģa izkārtojums
- Flexbox izkārtojums
- Vairāku kolonnu izkārtojums