Berbagi teknologi

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

Dalam CSS Grid Layout (tata letak grid) dan Flexbox (tata letak kotak fleksibel),gap adalah properti singkatan yang mengatur ukuran celah baris (talang) dan celah kolom (sering disebut "celah lintas sumbu" di Flexbox).Properti ini sangat menyederhanakan kebutuhan sebelumnya untuk mengaturnya secara terpisahrow-gap(atau grid-row-gap di CSS Grid lama) dancolumn-gap(atau grid-column-gap) proses yang rumit.

Digunakan dalam Tata Letak Grid

Dalam Tata Letak Kotak CSS,gap Properti dapat mengatur ukuran jarak antara baris grid dan kolom grid secara bersamaan.

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

Digunakan di Flexbox

Di Flexbox,gap Properti digunakan untuk mengatur jarak antar item fleksibel, termasuk celah pada sumbu utama dan sumbu silang (walaupun di Flexbox, konsep celah sumbu silang mungkin tidak seintuitif di Grid, karena hal ini terutama memengaruhi tata letak wadah fleksibel multi-baris).

.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

Tolong dicatat,gap Nilai atribut dapat berupa panjang (mis.px、em、vw dll.), persentase atau lainnyarow-gapDancolumn-gap Nilai-nilai hukum yang diterima.Selain itu, jika Anda membutuhkannyarow-gapDancolumn-gapUntuk menetapkan nilai yang berbeda, Anda dapat meneruskan kedua nilai ini sebagaigapProperti ini disediakan dalam dua argumen, nilai pertama berkaitan dengan celah baris, dan nilai kedua berkaitan dengan celah kolom (di Grid) atau celah lintas sumbu (di Flexbox, meskipun hal ini kurang umum).

Perlu dicatat bahwa meskipun demikiangapProperti didukung secara luas di versi browser terbaru, namun CSS tetap harus ditulis dengan mempertimbangkan kompatibilitas ke belakang dan mungkin diperlukan untuk digunakan-webkit-awalan (untuk beberapa browser lama) atau berikan cadangan.