Compartir tecnología

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

En CSS Grid Layout (diseño de cuadrícula) y Flexbox (diseño de caja flexible),gap es una propiedad abreviada que establece el tamaño tanto del espacio entre filas (canal) como del espacio entre columnas (a menudo llamado "espacio entre ejes transversales" en Flexbox).Esta propiedad simplifica enormemente la necesidad anterior de configurarla por separado.row-gap(o grid-row-gap en CSS Grid heredado) ycolumn-gap(o grid-column-gap) proceso engorroso.

Utilizado en diseño de cuadrícula

En diseño de cuadrícula CSS,gap Las propiedades pueden establecer el tamaño de los espacios entre las filas y las columnas de la cuadrícula al mismo tiempo.

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

Utilizado en Flexbox

En Flexbox,gap La propiedad se utiliza para establecer el espacio entre elementos flexibles, esto incluye el espacio en el eje principal y el eje transversal (aunque en Flexbox, el concepto de espacio en el eje transversal puede no ser tan intuitivo como en Grid, porque afecta principalmente el diseño de contenedores flexibles multilínea).

.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

Tenga en cuenta,gap El valor del atributo puede ser una longitud (p. ej.px、em、vw etc.), porcentaje o cualquier otrorow-gapycolumn-gap Valores legales aceptados.Además, si necesitarow-gapycolumn-gapPara establecer valores diferentes, puede pasar estos dos valores comogapLa propiedad se proporciona como dos argumentos, el primer valor corresponde a un espacio de fila y el segundo valor corresponde a un espacio de columna (en Grid) o un espacio de eje transversal (en Flexbox, aunque esto es menos común).

Vale la pena señalar que aunquegapLas propiedades son ampliamente admitidas en versiones recientes del navegador, pero aún así se debe escribir CSS teniendo en cuenta la compatibilidad con versiones anteriores y es posible que sea necesario utilizarlo.-webkit-prefijo (para algunos navegadores más antiguos) o proporcionar una alternativa.