Compartilhamento de tecnologia

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

Em CSS Grid Layout (layout de grade) e Flexbox (layout de caixa flexível),gap é uma propriedade abreviada que define o tamanho da lacuna da linha (medianiz) e da lacuna da coluna (geralmente chamada de "gap entre eixos cruzados" no Flexbox).Esta propriedade simplifica muito a necessidade anterior de defini-la separadamenterow-gap(ou grid-row-gap na grade CSS legada) ecolumn-gap(ou grid-column-gap) processo complicado.

Usado em layout de grade

No layout de grade CSS,gap As propriedades podem definir o tamanho dos intervalos entre as linhas e colunas da grade ao mesmo tempo.

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

Usado no Flexbox

No Flexbox,gap A propriedade é usada para definir a lacuna entre os itens flexíveis, incluindo a lacuna no eixo principal e no eixo cruzado (embora no Flexbox, o conceito de lacuna no eixo cruzado possa não ser tão intuitivo quanto no Grid, porque afeta principalmente o layout de contêineres flexíveis multilinha).

.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

Observe,gap O valor do atributo pode ser um comprimento (por exemplopx、em、vw etc.), porcentagem ou qualquer outrorow-gapecolumn-gap Valores legais aceitos.Além disso, se você precisarrow-gapecolumn-gapPara definir valores diferentes, você pode passar esses dois valores comogapA propriedade é fornecida como dois argumentos, o primeiro valor corresponde a um intervalo de linha e o segundo valor corresponde a um intervalo de coluna (no Grid) ou um intervalo de eixo cruzado (no Flexbox, embora isso seja menos comum).

Vale ressaltar que emboragapAs propriedades são amplamente suportadas em versões recentes de navegadores, mas o CSS ainda deve ser escrito tendo em mente a compatibilidade com versões anteriores e pode ser necessário usar-webkit-prefixo (para alguns navegadores mais antigos) ou fornecer um substituto.