Свойството на пропастта в CSS е съкращение за row-gapи column-gap, указващо размера на улуците, което е пространството между редовете и колоните в решетките, гъвкавите и многоколонните оформления.
/* 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; )
Използвайте плъзгача в демонстрацията по-долу, за да видите gapсвойството в действие:
Синтаксис
gap приема една или две стойности:
- Единична стойност задава и двете,
row-gapи една иcolumn-gapсъща стойност. - Когато се използват две стойности, първата задава,
row-gapа втората -column-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 Module дефинира пространството между решетките, използвайки grid-gapсвойството. gapе предназначен да го замени, така че пропуските да могат да бъдат дефинирани в множество методи за оформление на CSS, като flexbox, но grid-gapвсе пак трябва да се използва в случаи, когато браузър може да е реализирал, grid-gapно тепърва ще започне да поддържа по-новото gapсвойство.
Стойности
gap приема следните стойности:
normal: (По подразбиране) Браузърът ще посочи използвана стойност от 1em за оформление с много колони и 0px за всички останали контексти на оформление (т.е. мрежа и гъвкавост).: Всяко валидно и неотрицателна дължина CSS, катоpx,em,remи%, между другото.: Размерът на празнината като неотрицателна процентна стойност спрямо размера на елемента. (Вижте по-долу за подробности.)initial: Прилага настройката по подразбиране на свойството, която еnormal.inherit: Приема стойността на пропастта на родителя.unset: Премахва токаgapот елемента.
Проценти в свойствата на пролуките
Когато размерът на контейнера в измерението на празнината е определен, gapрешава процентите спрямо размера на полето за съдържание на контейнера във всеки тип оформление.
С други думи, когато браузърът знае размера на контейнера, той може да изчисли процентната стойност на gap. Например, когато височината на контейнера е 100px и gapе зададена на 10%, браузърът знае, че 10% от 100px е 10px.
Но когато браузърът не знае размера, той ще се запита: „10% от какво?“ В тези случаи се gapдържи по различен начин в зависимост от типа оформление.
В оформлението на мрежата процентите се решават срещу нула за определяне на вътрешния размер на вноските, но се разрешават срещу полето за съдържание на елемента, когато се излага съдържанието на кутията, което означава, че ще постави интервал между елементите, но пространството не влияе върху размера на контейнера.
В тази демонстрация височината на контейнера не е определена. Вижте какво се случва, когато увеличите gapразмера. След това задайте gapпикселните единици и опитайте отново:
При гъвкаво оформление процентите се разрешават срещу нула във всички случаи, което означава, че пропуските няма да се прилагат, когато размерът на контейнера не е известен на браузъра:
Използване на функцията calc () с празнина
Можете да използвате calc()функцията, за да укажете размера на, gapно по време на писането няма поддръжка за него в Safari и 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); )Примери
В gapимота е предназначена за използване в мрежата, флекс и мулти-колона оформления. Нека да разгледаме някои примери.
Оформление на мрежата
В следващата демонстрация можете да видите, gapче се използва за задаване на свойствата row-gapи column-gapсвойствата на мрежовия контейнер, като дефинира съответно улуците между решетките и колоните на мрежата:
Гъвкаво оформление
Прилагането на празнина към основната ос на гъвкав контейнер показва разстоянието между гъвкавите елементи в един ред на гъвкавото оформление.
Тук се column-gapизползва в посока на ред:
Тук се row-gapизползва в посока на колона:
Прилагането gapкъм напречната ос на гъвкав контейнер показва разстоянието между гъвкавите линии на гъвкавото оформление.
Ето row-gapпосока в ред:
Ето column-gapв посока на колона:
Разположение на няколко колони
column-gapсе появява в оформления с няколко колони, за да създаде пропуски между полетата на колони, но имайте предвид, че row-gapтова няма ефект, тъй като работим само в колони. gapвсе още може да се използва в този контекст, но column-gapще се прилага само.
Както можете да видите в следващата демонстрация, въпреки че gapсвойството има стойност 2rem, той разделя елементи само хоризонтално вместо двете посоки, тъй като работим в колони:
Колкото повече знаеш…
Има няколко неща, които си струва да се отбележат при работата с gapимота.
Това е хубав начин за предотвратяване на нежелано разстояние
Използвали ли сте някога полета за създаване на разстояния между елементи? Ако не внимаваме, можем да получим допълнителни интервали преди и след групата елементи.
Решаването, което обикновено изисква добавяне на отрицателни полета или прибягване до псевдо-селектори, за да се премахне полето от конкретни елементи. Но хубавото при използването на gapпо-модерни методи за оформление е, че имате пространство само между елементите. Допълнителният пробив в началото и края никога не е проблем!
Хей, ако искате да имате място около елементите, докато използвате gap, поставете paddingоколо контейнера така:
.container ( display: flex; gap: 1rem; padding: 1rem; )Размерът на улука не винаги е равен на стойността на пролуката
В gapимота не е единственото нещо, което може да постави пространство между предмети. Маржове, подложки justify-contentи align-contentсъщо могат да увеличат размера на улука и да повлияят на действителната gapстойност.
В следващия пример задаваме 1em, gapно както можете да видите, има много повече пространство между елементите, причинено от използването на разпределени подравнения, като justify-contentи align-content:
Поддръжка на браузър
Заявките за функции обикновено са добър начин да проверите дали браузърът поддържа конкретно свойство, но в този случай, ако проверите за gapсвойството във flexbox, може да получите фалшиво положително, тъй като заявка за функция няма да прави разлика между режимите на оформление. С други думи, може да се поддържа в гъвкаво оформление, което води до положителен резултат, но всъщност не се поддържа, ако се използва в мрежа.
Оформление на мрежата
| IE | Ръб, край | Firefox | Chrome | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Браузър за Android | Chrome за Android | Firefox за Android |
|---|---|---|---|---|
| 12+ | Не | 81+ | 84+ | 68+ |
Оформление на мрежата със стойности на calc ()
| IE | Ръб, край | Firefox | Chrome | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 84+ | 79+ | 84+ | Не | 69+ |
| iOS Safari | Opera Mobile | Браузър за Android | Chrome за Android | Firefox за Android |
|---|---|---|---|---|
| Не | Не | 81+ | 84+ | 68+ |
Оформление на мрежата с процентна стойност
| IE | Ръб, край | Firefox | Chrome | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 84+ | 79+ | 84+ | Не | 69+ |
| iOS Safari | Opera Mobile | Браузър за Android | Chrome за Android | Firefox за Android |
|---|---|---|---|---|
| Не | Не | 81+ | 84+ | 68+ |
Гъвкаво оформление
Спецификацията за използване gapс flexbox в момента е в състояние Работен проект.
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 84 | 63 | Не | 84 | TP |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Не | Не |
Разположение на няколко колони
| IE | Ръб, край | Firefox | Chrome | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 84+ | 79+ | 84+ | Не | 69+ |
| iOS Safari | Opera Mobile | Браузър за Android | Chrome за Android | Firefox за Android |
|---|---|---|---|---|
| Не | Не | 81+ | 84+ | 68+ |
Повече информация
- Модул за подравняване на кутията CSS Ниво 3
- Chromium приземява Flexbox празнина (билет # 761904)
- WebKit CSS Feature Status
Свързани
- Оформление на мрежата
- Оформление на Flexbox
- Разположение на няколко колони