# 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:

```css
.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:

```css
.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:

```css
.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.
