cssflexboxwrapMenengah4 mnt baca

Flex Wrap

flex-wrap, flex-flow shorthand, dan kenapa item default tidak wrap.

Masalah: item gepeng

Secara default flexbox memaksa semua item dalam satu baris (flex-wrap: nowrap). Kalau item kebanyakan, mereka menyusut sampai muat, bahkan sampai tidak terbaca.

css

.wadah {
  display: flex;
  flex-wrap: wrap; /* izinkan pindah baris */
}

Dengan wrap, item yang tidak muat turun ke baris baru dengan ukuran naturalnya.

Nilai wrap

nowrap (default): satu baris, item menyusut.
wrap: baris baru ke bawah.
wrap-reverse: baris baru ke atas (baris pertama di bawah).

Shorthand flex-flow

css

.wadah {
  flex-flow: row wrap; /* direction + wrap */
}

Singkatan dari flex-direction + flex-wrap. Praktis untuk pola umum seperti baris yang wrap.

Wrap + align-content

Saat wrap aktif dan ada banyak baris, align-content mengatur distribusi antar baris:

css

.galeri {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* baris rapat ke atas */
  gap: 12px;
}

Catatan teknis: flex-wrap: wrap adalah fondasi layout responsif tanpa media query: item otomatis turun baris saat layar sempit. Kombinasikan dengan flex: 1 1 200px pada item untuk grid fleksibel (dibahas di modul flex-item).

Kenapa default-nya nowrap?

Filosofi flexbox: "usahakan muat sebaris dulu". Untuk toolbar dan navigasi, perilaku ini benar: item menyusut sedikit lebih baik daripada turun baris yang merusak desain satu baris. Wrap adalah opt-in untuk kasus yang memang butuh banyak baris (galeri, chip, kartu).

Contoh: daftar chip/tag

css

.daftar-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: #e0f2fe;
  color: #0369a1;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.875rem;
  white-space: nowrap; /* tiap tag tidak putus */
}

Tag turun baris sebagai kesatuan, tidak terpotong di tengah.

Contoh: wrap dengan align-content

css

.galeri-mini {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* tumpukan baris di tengah vertikal */
  gap: 12px;
  height: 400px;
}

Jebakan

Lupa gap menyebabkan item menempel. Tanpa gap, item wrap akan rapat tanpa jarak. Selalu pasangkan wrap dengan gap.

flex-basis menentukan titik wrap. Item dengan flex-basis: 200px akan wrap saat ruang kurang dari 200px per item. Atur basis untuk mengontrol kapan wrap terjadi.

Tips profesional

Kombinasi flex-wrap: wrap + flex: 1 1 200px adalah "grid flexbox": kolom responsif tanpa media query dan tanpa grid.
wrap-reverse berguna untuk chat (pesan terbaru di bawah tapi DOM urut kronologis) dalam kasus khusus.
Uji wrap dengan DevTools device toolbar: seret lebar dan pastikan tidak ada item yang gepeng tak terbaca.

Rangkuman

Default nowrap bikin item menyusut. Tambahkan flex-wrap: wrap agar item turun baris secara natural. Pakai flex-flow sebagai shorthand dan align-content untuk mengatur antar baris.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Rasakan Gepengnya

Di playground:

Perkecil lebar preview (atau tambahkan item lagi) dan amati wadah .nowrap: item menyusut gepeng. Bandingkan dengan .wrap.
Ubah .wrap menjadi wrap-reverse, amati urutan barisnya.
Di komentar, jelaskan kapan nowrap justru diinginkan (ada kasusnya!).

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox