Vlastnosť gap v CSS je skratkou pre row-gapa column-gapso špecifikáciou veľkosti odkvapov, čo je priestor medzi riadkami a stĺpcami v rámci rozloženia mriežky, flexa a viacerých stĺpcov.
/* 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; )
Pomocou jazdca v ukážke nižšie uvidíte gapvlastnosť v akcii:
Syntax
gap akceptuje jednu alebo dve hodnoty:
- Jedna hodnota nastavuje obe
row-gapacolumn-gaprovnakú hodnotu. - Ak sa použijú dve hodnoty, prvá nastaví hodnotu
row-gapa druhá nastaví hodnotucolumn-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%; */ )Špecifikácia modulu rozloženia mriežky CSS definovala priestor medzi stopami mriežky pomocou grid-gapvlastnosti. gapje určený na nahradenie, aby bolo možné definovať medzery vo viacerých metódach rozloženia CSS, ako je flexbox, ale je grid-gapstále potrebné ich používať v prípadoch, keď môže byť implementovaný prehľadávač, ktorý grid-gapvšak ešte musí začať podporovať novšiu gapvlastnosť.
Hodnoty
gap akceptuje nasledujúce hodnoty:
normal: (Predvolené) Prehliadač určí použitú hodnotu 1em pre rozloženie s viacerými stĺpcami a 0px pre všetky ostatné kontexty rozloženia (tj. Mriežka a ohyb).: Ľubovoľný platný a nezáporné dĺžka CSS, ako je napríkladpx,em,rema%, medzi inými.: Veľkosť medzery ako nezáporná percentuálna hodnota vzhľadom na rozmer prvku. (Podrobnosti nájdete nižšie.)initial: Použije predvolené nastavenie vlastnosti, ktoré jenormal.inherit: Prijme hodnotu medzery rodiča.unset: Odstráni prúdgapz prvku.
Percentá vo vlastnostiach medzery
Keď je veľkosť kontajnera v dimenzii medzery definitívna, gapvyrieši sa percentuálna veľkosť oproti veľkosti poľa obsahu kontajnera v akýchkoľvek typoch rozloženia.
Inými slovami, keď prehliadač pozná veľkosť kontajnera, môže vypočítať percentuálnu hodnotu súboru gap. Napríklad keď je výška kontajnera 100 pixelov a gapje nastavená na 10%, prehliadač vie, že 10% zo 100 pixelov je 10 pixlov.
Ale keď prehliadač nevie veľkosť, bude sa diviť: „10% z čoho?“ V týchto prípadoch sa gapspráva odlišne na základe typu rozloženia.
V rozložení mriežky sa percentuálne hodnoty určujú proti nule pri určovaní príspevkov vnútornej veľkosti, ale pri rozložení obsahu poľa sa rozlišujú proti poli obsahu prvku, čo znamená, že medzi položky bude vložený priestor, ale medzera neovplyvní veľkosť kontajnera.
V tejto ukážke nie je výška kontajnera určitá. Zistite, čo sa stane, keď zväčšíte gapveľkosť. Potom nastavte gapjednotky pixelov a skúste to znova:
Pri flexibilnom rozložení sa percentuálne hodnoty vo všetkých prípadoch vyrovnávajú s nulou, čo znamená, že medzery sa neuplatnia, keď prehliadač nevie veľkosť kontajnera:
Použitie funkcie calc () s medzerou
Pomocou calc()funkcie môžete určiť veľkosť, gapale v čase písania tohto článku nie je v Safari a iOS podporovaná .
.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); )Príklady
Táto gapnehnuteľnosť je navrhnutá na použitie v mriežkových, flexi a viacstĺpcových rozloženiach. Pozrime sa na niekoľko príkladov.
Rozloženie mriežky
V nasledujúcej ukážke môžete vidieť, gapako sa používa na zadanie vlastností row-gapa column-gapvlastností kontajnera mriežky, definujúcich odkvapy medzi riadkami mriežky a stĺpcami mriežky:
Flex rozloženie
Aplikácia medzery na hlavnú os kontajnera flex znamená rozostup medzi položkami flex v jednom riadku rozloženia flex.
Tu sa column-gappoužíva v smere riadku:
Tu je row-gappoužitý v smere stĺpcov:
Aplikácia gapna priečnu os kontajnera flex znamená rozostup medzi líniami flexa rozloženia flexa.
Tu je row-gapv riadku:
Tu column-gapv smere stĺpca:
Rozloženie viacerých stĺpcov
column-gapsa zobrazuje v rozloženiach s viacerými stĺpcami na vytváranie medzier medzi políčkami stĺpcov, ale upozorňujeme, že to row-gapnemá žiadny vplyv, pretože pracujeme iba v stĺpcoch. gapsa v tejto súvislosti stále dá použiť, použije sa však iba column-gap.
Ako môžete vidieť v nasledujúcej ukážke, hoci má gapvlastnosť hodnotu 2rem, oddeľuje položky iba vodorovne namiesto oboch smerov, pretože pracujeme v stĺpcoch:
Čím viac vieš…
Pri práci s gapnehnuteľnosťou stojí za zmienku niekoľko vecí .
Je to pekný spôsob, ako zabrániť nežiaducim rozstupom
Už ste niekedy použili okraje na vytvorenie medzery medzi prvkami? Ak nebudeme opatrní, môžeme pred a za skupinou položiek skončiť extra medzerami.
Riešenie tohto problému zvyčajne vyžaduje pridanie negatívnych okrajov alebo použitie pseudo-selektorov na odstránenie okrajov z konkrétnych položiek. Príjemné na použití gapv modernejších metódach rozloženia je však to, že medzi položkami máte iba priestor. Extra cruft na začiatku a na konci nie je nikdy problémom!
Ale hej, ak chcete mať pri používaní priestor okolo predmetov gap, položte paddingkontajner takto:
.container ( display: flex; gap: 1rem; padding: 1rem; )Veľkosť žľabu sa nie vždy rovná hodnote medzery
Táto gapvlastnosť nie je jedinou vecou, ktorá môže umiestniť priestor medzi položkami. Okraje, výplne justify-contenta align-contentmôžu tiež zväčšiť veľkosť odkvapu a ovplyvniť skutočnú gaphodnotu.
V nasledujúcom príklade budeme nastavenia 1em gap, ale ako vidíte, tam je oveľa viac priestoru medzi položkami, spôsobené použitím distribuovaných zarovnanie, ako je justify-contenta align-content:
Podpora prehliadača
Dotazy na funkcie sú zvyčajne pekným spôsobom, ako skontrolovať, či prehliadač podporuje konkrétnu vlastnosť, ale v takom prípade, ak skontrolujete gapvlastnosť vo flexboxe, môžete dostať falošne pozitívny výsledok, pretože dotaz na funkciu nebude rozlišovať medzi režimami rozloženia. Inými slovami, môže to byť podporované vo flexibilnom rozložení, ktoré vedie k pozitívnemu výsledku, ale v skutočnosti to nie je podporované, ak sa používa v rozložení mriežky.
Rozloženie mriežky
| IE | Hrana | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Prehliadač Android | Chrome pre Android | Firefox pre Android |
|---|---|---|---|---|
| 12+ | Nie | 81+ | 84+ | 68+ |
Rozloženie mriežky s hodnotami calc ()
| IE | Hrana | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 84+ | 79+ | 84+ | Nie | 69+ |
| iOS Safari | Opera Mobile | Prehliadač Android | Chrome pre Android | Firefox pre Android |
|---|---|---|---|---|
| Nie | Nie | 81+ | 84+ | 68+ |
Rozloženie mriežky s percentuálnou hodnotou
| IE | Hrana | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 84+ | 79+ | 84+ | Nie | 69+ |
| iOS Safari | Opera Mobile | Prehliadač Android | Chrome pre Android | Firefox pre Android |
|---|---|---|---|---|
| Nie | Nie | 81+ | 84+ | 68+ |
Flex rozloženie
Špecifikácia používania gaps flexboxom je momentálne v stave Pracovný koncept.
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 84 | 63 | Nie | 84 | TP |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Nie | Nie |
Rozloženie viacerých stĺpcov
| IE | Hrana | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 84+ | 79+ | 84+ | Nie | 69+ |
| iOS Safari | Opera Mobile | Prehliadač Android | Chrome pre Android | Firefox pre Android |
|---|---|---|---|---|
| Nie | Nie | 81+ | 84+ | 68+ |
Viac informácií
- Modul zarovnania CSS boxu úrovne 3
- Chromu pristane medzera Flexboxu (lístok # 761904)
- Stav funkcie WebKit CSS
Súvisiace
- Rozloženie mriežky
- Rozloženie Flexboxu
- Rozloženie viacerých stĺpcov