Condivisione della tecnologia

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

In CSS Grid Layout (layout a griglia) e Flexbox (layout a casella flessibile),gap è una proprietà abbreviata che imposta la dimensione sia dello spazio tra le righe (rilegatura) che dello spazio tra le colonne (spesso chiamato "spazio tra gli assi trasversali" in Flexbox).Questa proprietà semplifica notevolmente la precedente necessità di impostarla separatamenterow-gap(O grid-row-gap nella griglia CSS legacy) ecolumn-gap(O grid-column-gap) processo complicato.

Utilizzato nel layout della griglia

Nel layout della griglia CSS,gap Le proprietà possono impostare contemporaneamente la dimensione degli spazi tra le righe e le colonne della griglia.

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

Utilizzato in Flexbox

In Flexbox,gap La proprietà viene utilizzata per impostare lo spazio tra gli elementi flessibili, questo include lo spazio sull'asse principale e sull'asse trasversale (anche se in Flexbox, il concetto di spazio sull'asse trasversale potrebbe non essere così intuitivo come in Grid, perché influenza principalmente il layout di contenitori flessibili multilinea).

.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

Notare che,gap Il valore dell'attributo può essere una lunghezza (ad es.px、em、vw ecc.), percentuale o altrorow-gapEcolumn-gap Valori legali accettati.Inoltre, se necessariorow-gapEcolumn-gapPer impostare valori diversi, puoi passare questi due valori comegapLa proprietà viene fornita come due argomenti, il primo valore corrisponde a uno spazio di riga e il secondo valore corrisponde a uno spazio di colonna (in Grid) o a uno spazio di asse trasversale (in Flexbox, sebbene questo sia meno comune).

Vale la pena notare che perògapLe proprietà sono ampiamente supportate nelle versioni recenti del browser, ma i CSS dovrebbero comunque essere scritti tenendo presente la compatibilità con le versioni precedenti e potrebbe essere necessario utilizzarli-webkit-prefisso (per alcuni browser meno recenti) o fornire un fallback.