Својство јаз у ЦСС-у је скраћеница за 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%; */ )Спецификација за ЦСС Грид Лаиоут Модуле дефинисала је простор између грид стаза користећи grid-gapсвојство. gapима за циљ да га замени тако да се празнине могу дефинисати у више метода ЦСС распореда, попут флекбок-а, али grid-gapи даље треба да се користи у случајевима када је прегледач можда применио, grid-gapали тек треба да почне да подржава новије gapсвојство.
Вредности
gap прихвата следеће вредности:
normal: (Подразумевано) Прегледач ће одредити коришћену вредност 1ем за распоред са више колона и 0пк за све остале контексте изгледа (тј. Мрежу и флексибилност).: Сваки важи и не-негативни ЦСС дужине, као што суpx,em,remи%, између осталог.: Величина празнине као негативна процентуална вредност у односу на димензију елемента. (Погледајте детаље у наставку.)initial: Примењује подразумевану поставку својства, која јеnormal.inherit: Усваја вредност разлике између родитеља.unset: Уклања струјуgapиз елемента.
Проценти у својствима зазора
Када је величина контејнера у димензији празнине дефинисана, gapрешава проценте у односу на величину оквира са садржајем контејнера у било ком типу распореда.
Другим речима, када прегледач зна величину контејнера, може да израчуна процентуалну вредност gap. На пример, када је висина контејнера 100 пиксела, а вредност gapподешена на 10%, прегледач зна да је 10% од 100 пиксела 10 пиксела.
Али када прегледач не зна величину, запитаће се, „10% од чега?“ У тим случајевима gapпонаша се другачије у зависности од типа изгледа.
У распореду мреже, проценти се разлучују против нуле за одређивање доприноса у унутрашњој величини, али се разрешавају против оквира за садржај елемента приликом полагања садржаја оквира, што значи да ће ставити размак између ставки, али размак неће утицати на величину контејнера.
У овом приказу висина контејнера није дефинитивна. Погледајте шта се дешава када повећате gapвеличину. Затим подесите gapјединице у пикселима и покушајте поново:
У флексибилном распореду, проценти се у свим случајевима решавају против нуле, што значи да се празнине неће применити када прегледач не зна величину контејнера:
Коришћење функције цалц () са празнином
Помоћу calc()функције можете одредити величину, gapали у тренутку писања овог текста за њу нема подршке на Сафарију и иОС-у.
.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својство има вредност 2рем, ставке раздваја само водоравно, уместо у оба смера, јер радимо у колонама:
Што више знаш…
Постоји неколико ствари које вреди обратити пажњу на рад са gapимањем.
То је леп начин за спречавање нежељених размака
Да ли сте икада користили маргине за стварање размака између елемената? Ако не будемо пажљиви, можемо добити додатни размак пре и после групе предмета.
Решавање које обично захтева додавање негативних маргина или прибегавање псеудо-селекторима ради уклањања маргине са одређених ставки. Али лепа ствар код употребе gapу савременијим методама распореда је та што имате само простор између предмета. Додатни проблем на почетку и на крају никада није проблем!
Али, хеј, ако желите да имате простора око предмета док користите gap, ставите paddingоко контејнера овако:
.container ( display: flex; gap: 1rem; padding: 1rem; )Величина олука није увек једнака вредности зазора
gapИмовина није једина ствар која може ставити размак између ставки. Маргине, облоге justify-contentи align-contentтакође могу повећати величину олука и утицати на стварну gapвредност.
У следећем примеру постављамо 1ем, gapали, као што видите, између ставки има много више простора, узроковано употребом дистрибуираних поравнања, попут justify-contentи align-content:
Подршка прегледача
Упити за карактеристике обично су леп начин да се провери да ли прегледач подржава одређено својство, али у овом случају, ако потражите gapсвојство у флекбок-у, можете добити лажно позитивно јер упит функције не разликује начине распореда. Другим речима, могао би бити подржан у флекс распореду који резултира позитивним резултатом, али заправо није подржан ако се користи у распореду мреже.
Распоред мреже
| ИЕ | Ивица | Фирефок | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 16+ | 61+ | 66+ | 12+ | 53+ |
| иОС Сафари | Опера Мобиле | Андроид претраживач | Цхроме за Андроид | Фирефок за Андроид |
|---|---|---|---|---|
| 12+ | Не | 81+ | 84+ | 68+ |
Распоред мреже са вредностима цалц ()
| ИЕ | Ивица | Фирефок | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 84+ | 79+ | 84+ | Не | 69+ |
| иОС Сафари | Опера Мобиле | Андроид претраживач | Цхроме за Андроид | Фирефок за Андроид |
|---|---|---|---|---|
| Не | Не | 81+ | 84+ | 68+ |
Распоред мреже са процентуалном вредношћу
| ИЕ | Ивица | Фирефок | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 84+ | 79+ | 84+ | Не | 69+ |
| иОС Сафари | Опера Мобиле | Андроид претраживач | Цхроме за Андроид | Фирефок за Андроид |
|---|---|---|---|---|
| Не | Не | 81+ | 84+ | 68+ |
Флек лаиоут
Спецификација за употребу gapса флекбок-ом тренутно је у статусу Воркинг Драфт.
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 84 | 63 | Не | 84 | ТП |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | Не | Не |
Изглед у више колона
| ИЕ | Ивица | Фирефок | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 84+ | 79+ | 84+ | Не | 69+ |
| иОС Сафари | Опера Мобиле | Андроид претраживач | Цхроме за Андроид | Фирефок за Андроид |
|---|---|---|---|---|
| Не | Не | 81+ | 84+ | 68+ |
Више информација
- ЦСС модул за поравнање оквира ниво 3
- Цхромиум стиже до празнине у Флекбок-у (улазница # 761904)
- Статус функције ВебКит ЦСС
Повезан
- Распоред мреже
- Флекбок Лаиоут
- Изглед више колона