Gap pada Flexbox

Semua properti Flexbox yang kita bahas sejauh ini menata posisi dan besaran item — belum ada yang mengatur jaraknya. Selama bertahun-tahun peran itu diisi margin beserta deret pengecualiannya, dan property gap kini mengambil alih dengan satu deklarasi. Chapter Gap pada section Display dan Normal Flow sudah memperkenalkan property ini di atas panggung flex sederhana; chapter ini memfokuskan perilaku gap yang khas Flexbox: hubungannya dengan sumbu, dengan flex-wrap, dan perannya sebagai pengganti trik margin di dalam container flex.

Jarak yang Dikelola Container #

Seperti properti penataan lain, gap ditulis pada flex container — bukan pada tiap item. Cara lama terlihat seperti ini:

/* cara lama: margin pada item plus pembersihan ujung */
.deret-tag .tag {
  margin-right: 12px;
}
.deret-tag .tag:last-child {
  margin-right: 0; /* wajib, agar tidak ada jarak melayang di ujung */
}

Dua aturan untuk satu kebutuhan, dan pembersihannya wajib ditulis ulang setiap arah layout berubah. Cara baru:

.deret-tag {
  display: flex;
  gap: 12px;
}

Satu deklarasi memberi jarak di antara item — tidak sebelum item pertama, tidak setelah item terakhir. Demo berikut membandingkannya dengan cara lama pada container wrap:

Tanpa pembersihan :last-child, warisan aturan margin itulah yang terekspos.

Perlu dicatat bahwa di dalam container flex, margin antar item tidak lagi menyatu seperti pada layout block — margin collapse tidak terjadi pada flex item. Jadi cara lama tetap berfungsi; masalahnya bukan kegagalan, melainkan jumlah aturan dan pengecualian yang harus dipelihara. Itulah yang gap singkirkan.

Satu lagi keunggulan yang mudah diremehkan: gap bekerja pada setiap pasangan item bertetangga, apa pun tipenya — campuran div, a, dan button di satu container tetap memperoleh jarak yang sama persis. Dengan margin, kita biasanya menulis class tambahan untuk menyamakan jarak antar tipe elemen yang berbeda. Konsistensi inilah yang membuat gap terasa paling berdampak saat konten dihasilkan secara dinamis, misalnya daftar tag yang jumlahnya tidak pasti.

row-gap dan column-gap di Flexbox #

gap adalah shorthand untuk dua property fisik: row-gap (jarak antar baris) dan column-gap (jarak antar kolom). Pada flex-direction: row, item berjajar sebagai kolom sehingga jarak antar item memakai column-gap, dan baris hasil wrap dipisah oleh row-gap. Saat arah berubah menjadi column, keduanya bertukar peran: row-gap menjadi jarak antar item yang bertumpuk. Itu sebabnya pola form vertikal dengan flex-direction: column; gap: 14px bekerja tanpa penyesuaian apa pun.

.galeri-kartu {
  display: flex;
  flex-wrap: wrap;
  row-gap: 24px;    /* jarak antar baris hasil wrap */
  column-gap: 12px; /* jarak antar kartu mendatar */
}

Demo berikut memakai row-gap: 24px dan column-gap: 12px sekaligus — jarak antar baris hasil wrap terlihat lebih lega daripada jarak mendatarnya:

gap dan flex-wrap: Satu Deklarasi untuk Dua Dimensi #

Kombinasi gap dengan flex-wrap adalah pasangan yang paling sering bekerja sama. Ketika item meluap ke baris kedua, row-gap otomatis mengatur jarak antar baris tersebut — sesuatu yang dulu menuntut margin-bottom pada semua item plus pembersihannya di baris terakhir. Ukuran dan nilai gap juga tidak peduli berapa item yang ada: tambah atau kurangi konten, jaraknya tetap konsisten.

Kesalahan Umum #

Ringkasan #

gap menutup peta penataan Flexbox: satu deklarasi pada container mengatur jarak antar item (column-gap), jarak antar baris hasil wrap (row-gap), dan tetap konsisten saat arah maupun jumlah item berubah — sementara margin kembali ke perannya mengatur jarak dengan elemen di luar container. Dengan fondasi, perataan, dan jarak lengkap, bagian kedua section ini beralih ke pemerataan besaran: bagaimana item tumbuh dan menyusut mengisi ruang melalui flex-grow dan flex-shrink.