Flexbox: Gap

Dalam modul ini, kita akan membahas penggunaan properti gap dalam CSS Flexbox, yang memungkinkan kita untuk menambahkan jarak antara flex items secara mudah dan efisien.

Properti gap digunakan untuk menentukan jarak antara flex items baik pada main axis maupun cross axis. Properti ini merupakan singkatan dari row-gap dan column-gap dan telah diintegrasikan ke dalam spesifikasi CSS Grid dan Flexbox.

Contoh Penggunaan:

.container {
  display: flex;
  gap: 20px; /* Menentukan jarak 20px antara flex items */
}

Untuk memisahkan gap pada CSS Flexbox, Anda dapat menggunakan properti row-gap dan column-gap untuk mengatur jarak antara flex items pada main axis (horizontal) dan cross axis (vertikal) secara terpisah.

Berikut contoh penggunaannya:

.container {
  display: flex;
  flex-direction: column; /* Atur orientasi menjadi kolom */
  row-gap: 20px; /* Menentukan jarak 20px antara flex items pada sumbu vertikal */
  column-gap: 10px; /* Menentukan jarak 10px antara flex items pada sumbu horizontal */
}

Dalam contoh di atas, row-gap digunakan untuk menentukan jarak antara flex items pada sumbu vertikal (antara baris), sedangkan column-gap digunakan untuk menentukan jarak antara flex items pada sumbu horizontal (antara kolom).

Properti gap dapat digunakan dalam kombinasi dengan properti justify-content dan align-items untuk mengatur penempatan dan jarak antara flex items dalam flex container.

Contoh Penggunaan dengan Properti Lain:

.container {
  display: flex;
  justify-content: space-between; /* Menyisakan ruang di antara flex items */
  align-items: center; /* Mengatur penempatan flex items di tengah-tengah container */
  gap: 10px; /* Menentukan jarak 10px antara flex items */
}

Dengan menggunakan properti gap, pengaturan jarak antara flex items menjadi lebih mudah dan bersih tanpa perlu menggunakan metode lain seperti margin atau padding. Ini juga membantu dalam menciptakan tata letak yang responsif dan lebih teratur dalam desain web kita.