Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

В CSS Grid Layout (сетчатая компоновка) и Flexbox (гибкая блочная компоновка)gap — это сокращенное свойство, которое задает размер как промежутка между строками (переплета), так и зазора между столбцами (часто называемого «межосевым зазором» во Flexbox).Это свойство значительно упрощает предыдущую необходимость устанавливать его отдельно.row-gap(или grid-row-gap в устаревшей CSS Grid) иcolumn-gap(или grid-column-gap) трудоемкий процесс.

Используется в макете сетки

В макете сетки CSSgap Свойства могут одновременно устанавливать размер промежутков между строками и столбцами сетки.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三个等宽的列 */
  gap: 20px; /* 同时设置行和列间隙为20px */
  /* 或者更具体地 */
  /* gap: 20px 30px; /* 第一个值设置行间隙，第二个值设置列间隙 */
}
1
2
3
4
5
6
7

Используется во флексбоксе

Во флексбоксеgap Свойство используется для установки зазора между гибкими элементами, включая зазор на главной оси и поперечной оси (хотя во Flexbox концепция зазора по поперечной оси может быть не такой интуитивно понятной, как в Grid, поскольку она в основном влияет на макет многострочные гибкие контейнеры).

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许flex项换行 */
  gap: 10px; /* 同时设置主轴和交叉轴上的间隙为10px */
  /* 或者更具体地 */
  /* row-gap: 10px; /* 仅在需要时设置行间隙 */
  /* column-gap: 15px; /* 仅在需要时设置列间隙（或交叉轴间隙），但这在Flexbox中通常不太常见 */
}
1
2
3
4
5
6
7
8

Пожалуйста, обрати внимание,gap Значением атрибута может быть длина (например,px、em、vw и т. д.), проценты или любые другиеrow-gapиcolumn-gap Принятые юридические ценности.Кроме того, если вам нужноrow-gapиcolumn-gapЧтобы установить разные значения, вы можете передать эти два значения какgapСвойство предоставляется в виде двух аргументов: первое значение соответствует пробелу в строке, а второе значение соответствует пробелу в столбце (в Grid) или разрыву между осями (во Flexbox, хотя это встречается реже).

Стоит отметить, что хотяgapСвойства широко поддерживаются в последних версиях браузеров, но CSS по-прежнему следует писать с учетом обратной совместимости, и для его использования может потребоваться использование свойств.-webkit-префикс (для некоторых старых браузеров) или предоставить запасной вариант.