CSS: n aukko-ominaisuus on lyhenne row-gapja column-gap, mikä määrittelee kourujen koon, mikä on rivien ja sarakkeiden välinen tila ruudukko-, taipuisa- ja monisarakkeisissa asetteluissa.
/* 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; )
Käytä alla olevan esittelyn liukusäädintä nähdäksesi gapomaisuuden toiminnassa:
Syntaksi
gap hyväksyy yhden tai kaksi arvoa:
- Yksi arvo asettaa molemmat
row-gapjacolumn-gapsamalla arvolla. - Kun käytetään kahta arvoa, ensimmäinen asettaa
row-gapja toinen asettaacolumn-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 -moduulin määrittely määritteli ruudukkoradan välisen tilan grid-gapominaisuutta käyttämällä . gapon tarkoitettu korvaamaan se siten, että aukot voidaan määritellä useissa CSS-asettelumenetelmissä, kuten flexbox, mutta sitä on grid-gapsilti käytettävä tapauksissa, joissa selain on saattanut toteuttaa, grid-gapmutta ei ole vielä alkanut tukea uudempaa gapominaisuutta.
Arvot
gap hyväksyy seuraavat arvot:
normal: (Oletus) Selain määrittää käytetyn arvon 1em monisarakkeiselle asettelulle ja 0px kaikille muille asetteluyhteyksille (eli ruudukolle ja joustavuudelle).: Mikä tahansa kelvollinen ja ei-negatiivinen CSS pituus, kutenpx,em,remja%muun muassa.: Rajan koko ei-negatiivisena prosenttiarvona suhteessa elementin ulottuvuuteen. (Katso lisätietoja alla.)initial: Asettaa kiinteistön oletusasetuksen, joka onnormal.inherit: Hyväksyy vanhemman väliarvon.unset: Poistaa virrangapelementistä.
Prosenttiosuudet aukko-ominaisuuksissa
Kun aukkomittassa olevan säiliön koko on määritelty, gapprosenttiosuudet ratkaistaan kontin sisältökentän koon suhteen missä tahansa asettelutyypissä.
Toisin sanoen, kun selain tietää säilön koon, se voi laskea gap. Esimerkiksi, kun säiliön korkeus on 100 kuvapistettä ja sen gaparvoksi on asetettu 10%, selain tietää, että 10 prosenttia 100 kuvapisteestä on 10 kuvapistettä.
Mutta kun selain ei tiedä kokoa, se ihmettelee, "10% mitä?" Näissä tapauksissa gapkäyttäytyy eri tavalla asettelutyypin mukaan.
Ruudukkoasettelussa prosenttiosuudet erottuvat nollasta sisäisen kokomäärän määrittämiseksi, mutta erottuvat elementin sisältökentästä, kun asetat laatikon sisällön, mikä tarkoittaa, että se sijoittaa tilaa esineiden väliin, mutta tila ei vaikuta kontin kokoon.
Tässä esittelyssä kontin korkeus ei ole selvä. Katso mitä tapahtuu, kun kasvatat gapkokoa. Aseta sitten gappikseliyksiköt ja yritä uudelleen:
Joustavassa asettelussa prosenttiosuudet ratkaisevat kaikissa tapauksissa nollan, mikä tarkoittaa, että aukkoja ei käytetä, kun selaimen tiedossa ei ole säilön kokoa:
Funktion calc () käyttäminen aukolla
Voit käyttää calc()toimintoa ja määrittää koon gap, mutta tuolloin tätä kirjoitettaessa, ei ole tukea sen Safarissa 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); )Esimerkkejä
gapOminaisuus on suunniteltu käytettäväksi verkkoon, flex ja usean sarakkeen kaavoista. Katsotaanpa joitain esimerkkejä.
Ruudukon asettelu
Seuraavassa esittelyssä näet, gapkuinka sitä käytetään määrittämään ruudukkosäiliö row-gapja column-gapominaisuudet määrittelemällä ruudukkorivien ja ruudukkosarakkeiden väliset kourut:
Joustava asettelu
Rakon lisääminen joustavan säiliön pääakselille osoittaa joustavien kohteiden välisen etäisyyden joustavan asettelun yhdellä rivillä.
Tätä column-gapkäytetään peräkkäin:
Tätä row-gapkäytetään sarakkeen suuntaan:
Soveltamalla gap, että poikittaisakseli flex säiliön osoittaa välit välillä flex linjat on flex asettelua.
Tässä row-gapon rivin suunta:
Tässä column-gapon sarakkeen suunta:
Usean sarakkeen asettelu
column-gapnäkyy monisarakkeisissa asetteluissa luodakseen aukkoja sarakeruutujen välille, mutta huomaa, että row-gapsillä ei ole vaikutusta, koska työskentelemme vain sarakkeissa. gapvoidaan silti käyttää tässä yhteydessä, mutta vain sitä column-gapkäytetään.
Kuten seuraavasta esittelystä näet, vaikka gapominaisuuden arvo on 2rem, se erottaa kohteet vain vaakasuunnassa molempien suuntien sijaan, koska työskentelemme sarakkeissa:
Mitä enemmän tiedät…
Kiinteistön kanssa työskentelystä on syytä kiinnittää huomiota muutamaan asiaan gap.
Se on mukava tapa estää ei-toivottu välilyönti
Oletko koskaan käyttänyt marginaaleja välien luomiseen elementtien välillä? Jos emme ole varovaisia, voimme päätyä ylimääräiseen väliin ennen ryhmäryhmää ja sen jälkeen.
Ratkaisu edellyttää yleensä negatiivisten marginaalien lisäämistä tai näennäisselektorien turvaamista marginaalien poistamiseksi tietyistä kohteista. Mutta gapmukavampi käyttää nykyaikaisemmissa asettelumenetelmissä on, että sinulla on tilaa vain esineiden välillä. Ylimääräinen risteily alussa ja lopussa ei ole koskaan ongelma!
Mutta jos haluat, että esineiden ympärillä on tilaa käytön aikana gap, laita paddingsäiliö ympäri näin:
.container ( display: flex; gap: 1rem; padding: 1rem; )Kourun koko ei ole aina yhtä suuri kuin aukon arvo
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.
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 84 | 63 | Ei | 84 | TP |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Ei | Ei |
Usean sarakkeen asettelu
| IE | Reuna | Firefox | Kromi | Safari | Ooppera |
|---|---|---|---|---|---|
| Ei | 84+ | 79+ | 84+ | Ei | 69+ |
| iOS Safari | Opera Mobile | Android-selain | Chrome Androidille | Firefox Androidille |
|---|---|---|---|---|
| Ei | Ei | 81+ | 84+ | 68+ |
Lisää tietoa
- CSS-laatikon kohdistusmoduuli, taso 3
- Kromi laskeutuu Flexbox-aukkoon (lippu # 761904)
- WebKit CSS -ominaisuuden tila
Liittyvät
- Ruudukon asettelu
- Flexbox-asettelu
- Usean sarakkeen asettelu