A rés ingatlan CSS egy rövidítés row-gap, és column-gap, meghatározva a méret ereszcsatornák, amely a tér sorok és oszlopok között a rács, flex, és a multi-oszlop elrendezés.
/* 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; )
Az alábbi demó csúszkájával megtekintheti a gaptulajdonság működését:
Szintaxis
gap elfogad egy vagy két értéket:
- Egyetlen érték állítja be mindkettőt,
row-gapéscolumn-gapugyanazzal az értékkel. - Két érték használata esetén az első a
row-gap, a második pedig acolumn-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%; */ )A CSS Grid Layout Modul specifikációja a grid-gaptulajdonság segítségével határozta meg a rácssávok közötti teret . gapcélja annak cseréje, hogy a hiányosságok meghatározhatók legyenek több CSS elrendezési módszerben, például a flexboxban, de grid-gaptovábbra is fel kell használni azokat az eseteket, amikor egy böngésző esetleg megvalósította, grid-gapde még nem kezdte el támogatni az újabb gaptulajdonságot.
Értékek
gap a következő értékeket fogadja el:
normal: (Alapértelmezés) A böngésző megadja az 1em értéket a többoszlopos elrendezéshez és a 0px értéket az összes többi elrendezési környezethez (pl. Rács és flex).: Bármely érvényes és nem negatív CSS hosszúságú, példáulpx,em,remés%, többek között.: A rés nagysága nem negatív százalékos értékként az elem dimenziójához viszonyítva. (A részleteket lásd alább.)initial: A tulajdonság alapértelmezett beállítását alkalmazzanormal.inherit: Elfogadja a szülő résértékét.unset: Eltávolítja az áramotgapaz elemtől.
A rés tulajdonságainak százalékos aránya
Ha a tároló mérete a rés dimenziójában határozott, akkor a gapszázalékokat feloldja a konténer tartalomdobozának méretével szemben bármely elrendezési típusban.
Más szavakkal, amikor a böngésző tudja a tároló méretét, kiszámíthatja a gap. Például, ha a tároló magassága 100 képpont, és az gapértéke 10%, a böngésző tudja, hogy a 100 képpont 10% -a 10 képpont.
De amikor a böngésző nem tudja a méretét, akkor elgondolkodik: „Micsoda 10%?” Ezekben az esetekben gapaz elrendezés típusától eltérően viselkedik.
Rácsos elrendezésben a százalékok nulla ellenértékkel határozódnak meg a belső méret hozzájárulásának meghatározásához, de az elem tartalmi mezőjéhez viszonyítva, amikor a doboz tartalmát lefektetik, vagyis ez helyet foglal az elemek között, de a szóköz nem befolyásolja a tároló méretét.
Ebben a bemutatóban a konténer magassága nem meghatározott. Nézze meg, mi történik, ha növeli a gapméretet. Ezután állítsa gapbe pixelegységben, és próbálja újra:
Rugalmas elrendezésben a százalékok minden esetben nullával szemben oldódnak meg, ami azt jelenti, hogy nem lesznek hiányosságok, ha a tároló méretét a böngésző nem ismeri:
A calc () függvény használata réssel
A calc()function segítségével megadhatja a méret méretét, gapde az írás idején a Safari és az iOS nem támogatja azt .
.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); )Példák
Az gapingatlant rácsos, rugalmas és több oszlopos elrendezésben történő használatra tervezték. Nézzünk meg néhány példát.
Rácsszerkezet
A következő bemutatóban láthatja , hogy a rácstartályban megadják gapa row-gapés column-gaptulajdonságokat, és meghatározzák a rácssorok és a rácsoszlopok közötti ereszcsatornákat:
Flex elrendezés
A rés alkalmazása a flexitároló fő tengelyére a rugalmas elemek közötti távolságot jelzi a flex elrendezés egyetlen sorában.
Itt column-gaphasználjuk sorban:
Itt oszlopirányban row-gaphasználjuk:
Alkalmazása gapa kereszttengely egy Flex konténer jelzi térköz közötti flex vonalak a Flex elrendezést.
Itt van row-gapegy sor irányban:
Itt van column-gapegy oszlop irányában:
Többoszlopos elrendezés
column-gaptöbb oszlopos elrendezésben jelenik meg, hogy hézagokat hozzon létre az oszlopdobozok között, de vegye figyelembe, hogy row-gapennek nincs hatása, mivel csak oszlopokban dolgozunk. gaptovábbra is használható ebben az összefüggésben, de csak a column-gapalkalmazni fogják.
Amint a következő bemutatón látható, bár a gaptulajdonság értéke 2rem, csak vízszintesen választja el az elemeket mindkét irány helyett, mivel oszlopokban dolgozunk:
Minél többet tudsz…
Van néhány dolog, amit érdemes megjegyezni az gapingatlannal való együttműködésről.
Ez egy jó módszer a nem kívánt térközök megakadályozására
Használt már margókat az elemek közötti távolság létrehozásához? Ha nem vagyunk óvatosak, akkor extra szóközökkel járhatunk az elemek csoportja előtt és után.
Ennek megoldásához általában negatív margók hozzáadására van szükség, vagy álszelektorokhoz kell folyamodni, hogy eltávolítsuk a margót az egyes elemekből. De a gapmodernebb elrendezési módszerek használatában az a szép , hogy csak az elemek között van hely. Az elején és a végén történő extra tompulás soha nem jelent problémát!
De, hé, ha használat közben helyet akarsz hagyni az elemek körül gap, akkor így tedd paddingkörbe a tartályt:
.container ( display: flex; gap: 1rem; padding: 1rem; )Az ereszcsatorna mérete nem mindig egyenlő a résértékkel
Az gapingatlan nem az egyetlen dolog, ami tegyen szóközt terméket. Margók, közbetétek, justify-contentés align-contentszintén növeli a méretét a csatornába, és befolyásolja a tényleges gapértéket.
A következő példában 1em-et állítunk be, gapde amint láthatja, sokkal több hely van az elemek között, amelyet az elosztott igazítások, például justify-contentés a használata okoz align-content:
Böngésző támogatás
A jellemző lekérdezések általában jó módszerek annak ellenőrzésére, hogy egy böngésző támogatja-e egy adott tulajdonságot, de ebben az esetben, ha a gaptulajdonságot a flexboxban ellenőrzi, akkor hamis pozitív eredményt kaphat, mert a szolgáltatás lekérdezése nem tesz különbséget az elrendezési módok között. Más szavakkal, lehet, hogy rugalmas elrendezésben támogatják, amely pozitív eredményt eredményez, de valójában nem támogatott, ha rácsos elrendezésben használják.
Rácsszerkezet
| AZAZ | Él | Firefox | Króm | Szafari | Opera |
|---|---|---|---|---|---|
| Nem | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Android böngésző | Chrome Androidhoz | Firefox Androidra |
|---|---|---|---|---|
| 12+ | Nem | 81+ | 84+ | 68+ |
Rácsos elrendezés calc () értékekkel
| AZAZ | Él | Firefox | Króm | Szafari | Opera |
|---|---|---|---|---|---|
| Nem | 84+ | 79+ | 84+ | Nem | 69+ |
| iOS Safari | Opera Mobile | Android böngésző | Chrome Androidhoz | Firefox Androidra |
|---|---|---|---|---|
| Nem | Nem | 81+ | 84+ | 68+ |
Rács elrendezése százalékos értékkel
| AZAZ | Él | Firefox | Króm | Szafari | Opera |
|---|---|---|---|---|---|
| Nem | 84+ | 79+ | 84+ | Nem | 69+ |
| iOS Safari | Opera Mobile | Android böngésző | Chrome Androidhoz | Firefox Androidra |
|---|---|---|---|---|
| Nem | Nem | 81+ | 84+ | 68+ |
Flex elrendezés
A gapflexbox használatával kapcsolatos specifikáció jelenleg Working Draft állapotban van.
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 84. | 63 | Nem | 84. | TP |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Nem | Nem |
Többoszlopos elrendezés
| AZAZ | Él | Firefox | Króm | Szafari | Opera |
|---|---|---|---|---|---|
| Nem | 84+ | 79+ | 84+ | Nem | 69+ |
| iOS Safari | Opera Mobile | Android böngésző | Chrome Androidhoz | Firefox Androidra |
|---|---|---|---|---|
| Nem | Nem | 81+ | 84+ | 68+ |
Több információ
- CSS Box Alignment Module 3. szint
- A króm landol a Flexbox résen (761904. számú jegy)
- WebKit CSS szolgáltatás állapota
Összefüggő
- Rácsszerkezet
- Flexbox elrendezés
- Többoszlopos elrendezés