Partage de technologie

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

Dans CSS Grid Layout (disposition en grille) et Flexbox (disposition en boîte flexible),gap est une propriété abrégée qui définit la taille de l'espacement des lignes (gouttière) et de l'espacement des colonnes (souvent appelé « espacement transversal » dans Flexbox).Cette propriété simplifie grandement la nécessité précédente de la définir séparémentrow-gap(ou grid-row-gap dans l'ancienne grille CSS) etcolumn-gap(ou grid-column-gap) processus fastidieux.

Utilisé dans la disposition en grille

Dans la disposition en grille CSS,gap Les propriétés peuvent définir simultanément la taille des espaces entre les lignes et les colonnes de la grille.

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

Utilisé dans Flexbox

Dans Flexbox,gap La propriété est utilisée pour définir l'écart entre les éléments flexibles, cela inclut l'écart sur l'axe principal et l'axe transversal (bien que dans Flexbox, le concept d'écart sur l'axe transversal peut ne pas être aussi intuitif que dans Grid, car il affecte principalement la disposition des éléments flexibles. conteneurs flexibles multilignes).

.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

Veuillez noter,gap La valeur de l'attribut peut être une longueur (par ex.px、em、vw etc.), pourcentage ou tout autrerow-gapetcolumn-gap Valeurs légales acceptées.De plus, si vous avez besoinrow-gapetcolumn-gapPour définir des valeurs différentes, vous pouvez transmettre ces deux valeurs commegapLa propriété est fournie sous forme de deux arguments, la première valeur correspond à un espacement de ligne et la deuxième valeur correspond à un espacement de colonne (dans Grid) ou à un espacement d'axe transversal (dans Flexbox, bien que cela soit moins courant).

Il convient de noter que même sigapLes propriétés sont largement prises en charge dans les versions récentes des navigateurs, mais CSS doit toujours être écrit en gardant à l'esprit la compatibilité ascendante et peut être nécessaire pour utiliser-webkit-préfixe (pour certains navigateurs plus anciens) ou fournir une solution de secours.