FLEX-WRAP

Flex-wrap adalah properti dalam CSS Flexbox yang berfungsi untuk membungkus atau tidak membungkus baris atau kolom flex. Properti ini membantu dalam mengatur layout elemen dengan lebih efisien, terutama ketika ruang di halaman web terbatas.

Penggunaan

Kamu dapat menggunakan properti flex-wrap dengan salah satu dari tiga nilai: nowrap, wrap, dan wrap-reverse.

.container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Nilai defaultnya adalah nowrap, yang berarti item flex tidak akan membungkus.

nowrap

.container {
  display: flex;
  flex-wrap: nowrap;
}

Dengan nowrap, semua item flex akan mencoba untuk menyesuaikan diri dalam satu baris atau kolom. Jika ruang tidak cukup, item-item akan mengecil dan menyesuaikan diri.

wrap

.container {
  display: flex;
  flex-wrap: wrap;
}

Dengan wrap, item-item flex akan membungkus ke baris atau kolom berikutnya jika ruang tidak cukup. Ini berarti baris atau kolom baru akan dibuat sesuai kebutuhan.

wrap-reverse

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

wrap-reverse bekerja dengan cara yang sama dengan wrap, tetapi dalam arah yang berlawanan. Jika elemen melebihi ruang yang tersedia, akan membungkus ke baris atau kolom sebelumnya.

Contoh Penggunaan

Berikut ini adalah contoh penggunaan flex-wrap:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 100px;
  height: 100px;
}

Pada contoh di atas, jika lebar viewport kurang dari 400px (lebar total dari semua kotak), maka item flex akan membungkus ke baris berikutnya. Sehingga, hasilnya akan terlihat rapi dan menyesuaikan dengan ruang yang tersedia.

Dengan mempelajari properti flex-wrap, kamu dapat membuat halaman web yang lebih responsif dan menarik bagi pengguna.