Flex Wrap

Sampai bab ini, seluruh items kita selalu muat dalam satu baris. Pada layout nyata, jumlah items tidak pernah berkenan menunggu: deretan kartu produk bertambah, menu bertambah, dan container tetap 600px. flex-wrap menjawab pertanyaan “apa yang terjadi ketika items tidak muat?” dengan tiga nilai: menyusutkan items dalam satu baris (nowrap), membolehkan pindah baris (wrap), atau pindah baris dengan urutan terbalik (wrap-reverse). Pada Chapter ini kita melihat ketiganya pada kasus deretan kartu.

nowrap: Default yang Menyusutkan #

Nilai default flex-wrap adalah nowrap — satu baris, dan items diperintah menyusut bila kekurangan ruang. Contoh kerja kita memakai container 600px berisi empat kartu 200px: total kebutuhan 800px, kekurangan 200px. Karena keempat kartu memiliki faktor flex-shrink dan basis yang sama, kekurangan dibagi rata — setiap kartu menyusut 50px menjadi 150px. Mekanisme pembagian penyusutan kita bedah tuntas pada Chapter Flex Grow, Flex Shrink, dan Flex Basis ; di sini cukup dicatat bahwa flexbox memilih menyusutkan, bukan menggulir atau memindah baris.

.papan-nowrap { display: flex; flex-wrap: nowrap;   width: 600px; }
.papan-wrap   { display: flex; flex-wrap: wrap;     width: 600px; }
.papan-reverse{ display: flex; flex-wrap: wrap-reverse; width: 600px; }
.papan-nowrap, .papan-wrap, .papan-reverse {
  background: rgb(241, 245, 249);
}
.kartu {
  width: 200px;            /* 4 kartu = 800px > 600px container */
  height: 64px;
  border: 2px solid rgb(255, 255, 255);
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 60px;
}

Mari kita telaah bagian-bagian pentingnya:

1. Baris 1 (flex-wrap: nowrap;): nilai default, dituliskan eksplisit sebagai pembanding. Keempat kartu tetap dipaksa satu baris dan menyusut menjadi 150px.
2. Baris 2 (flex-wrap: wrap;): kartu keempat yang tidak muat dipindah ke baris kedua, dan ketiga kartu pertama mempertahankan lebar utuh 200px.
3. Baris 3 (flex-wrap: wrap-reverse;): baris-baris tersusun seperti wrap, tetapi urutan barisnya dibalik — baris kedua tampil di atas.
4. .kartu border 2px: garis putih ini sekadar pemisah visual; karena demo memakai box-sizing: border-box, lebar kartu tetap terhitung 200px utuh.

HTML pendampingnya mengisi tiga papan dengan kartu bernomor yang sama:

<div class="papan-wrap">
  <div class="kartu">1</div>
  <div class="kartu">2</div>
  <div class="kartu">3</div>
  <div class="kartu">4</div>
</div>

Hasil di Browser:

Papan nowrap: empat kartu tetap satu baris, masing-masing menyusut dari
200px menjadi 150px (computed width 150px).
Papan wrap: tiga kartu di baris pertama dengan lebar utuh 200px, kartu
keempat pindah ke baris kedua.
Papan wrap-reverse: baris berisi kartu 4 tampil di atas baris berisi
kartu 1-3.
Nilai computed yang diperiksa harness: flex-wrap papan nowrap = nowrap,
papan wrap = wrap; lebar kartu pada masing-masing papan sesuai uraian.

wrap: Baris Baru Bila Tidak Muat #

Nilai wrap mengubah baris tunggal menjadi deretan baris: bila kartu berikutnya tidak muat lagi, kartu tersebut pindah ke baris baru. Setiap baris kemudian diperlakukan terpisah — justify-content dan penjajaran cross axis bekerja per baris, bukan pada keseluruhan container. Inilah dasar pola galeri kartu yang responsif: lebar kartu menentukan berapa banyak yang muat per baris, dan sisanya otomatis turun.

Perlu diingat bahwa pindah baris terjadi berdasarkan perhitungan ukuran, bukan per kata. Dua kartu 200px di container 600px tetap sebaris; kartu ketiga yang membuat total melebihi 600px-lah yang turun, meskipun secara kasar “masih tersisa sedikit ruang”.

wrap-reverse: Baris Terbalik #

Nilai wrap-reverse memakai aturan pindah baris yang sama dengan wrap, tetapi menyusun baris-barisnya dari bawah: baris pertama konten menempel di dasar container, dan baris tambahan muncul di atasnya. Pada demo, baris berisi kartu 4 justru tampil paling atas. Pemanfaatannya jarang dan biasanya terbatas pada kasus antarmuka yang tumbuh ke atas, seperti daftar pesan terbaru.

Dengan wrap, satu dimensi terakhir dari model flexbox terbuka: bagaimana items membagi ruang di main axis — baik ruang sisa maupun kekurangannya. Itulah materi Chapter berikutnya.

.papan-nowrap { display: flex; flex-wrap: nowrap;      width: 600px; }
.papan-wrap   { display: flex; flex-wrap: wrap;        width: 600px; }
.papan-reverse{ display: flex; flex-wrap: wrap-reverse; width: 600px; }
.papan-nowrap, .papan-wrap, .papan-reverse {
  background: rgb(241, 245, 249);
}
.kartu {
  width: 200px;            /* 4 kartu = 800px > 600px container */
  height: 64px;
  border: 2px solid rgb(255, 255, 255);
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 60px;
}