GAP FLEXBOX

Dalam pembuatan layout website, terkadang kamu perlu mengatur jarak antara item atau elemen di dalam layout tersebut. Salah satu cara yang dapat digunakan adalah menggunakan properti Gap dalam Flexbox CSS. Properti ini memungkinkan kamu untuk mengontrol jarak antara item flex.

Menggunakan Properti Gap

Properti gap dalam flexbox sangat mudah digunakan. Kamu hanya perlu menentukan nilai untuk jarak yang diinginkan dan properti ini akan otomatis mengatur jarak antara elemen dalam flex container.

Berikut adalah contoh penggunaannya:

.container {
  display: flex;
  gap: 20px;
}

Dalam contoh di atas, kita memberikan jarak 20px antara setiap elemen dalam flex container dengan kelas .container.

Nilai yang Dapat Diberikan pada Properti Gap

Properti gap menerima dua jenis nilai:

• length: Nilai ini bisa dalam satuan px, em, rem, cm, mm, in, pt, atau pc.
• percentage: Nilai ini ditentukan berdasarkan persentase dari lebar flex container.

Berikut adalah contoh penggunaan keduanya:

.container {
  display: flex;
  gap: 20px; /* Menggunakan nilai length */
}

.container2 {
  display: flex;
  gap: 10%; /* Menggunakan nilai percentage */
}

Mengatur Jarak Vertikal dan Horizontal Secara Terpisah

Kamu juga bisa mengatur jarak vertikal dan horizontal secara terpisah dengan memberikan dua nilai pada properti gap:

.container {
  display: flex;
  gap: 20px 40px; /* 20px untuk vertikal dan 40px untuk horizontal */
}

Pada contoh di atas, jarak vertikal antar item adalah 20px, dan jarak horizontal adalah 40px.

Browser Support

Perlu diingat bahwa penggunaan properti gap dalam flexbox belum sepenuhnya didukung oleh semua browser. Cek selalu kompatibilitas browser sebelum implementasi di produksi. Kamu bisa memeriksa dukungan browser terhadap properti gap di Can I Use.

Penutup

Properti gap dalam flexbox memungkinkan pengaturan jarak antar item dengan mudah dan fleksibel. Walau belum didukung secara universal oleh semua browser, properti ini dapat menjadi pilihan yang baik untuk mengatur layout dengan cara yang lebih intuitif dan mudah diatur.