← CSS23 / 62

flex-wrap agar tidak gepeng di layar kecil

Secara default item flex memaksa diri tetap satu baris dan menyusut sampai gepeng. flex-wrap: wrap mengizinkan mereka turun ke baris berikutnya. Kombinasi flex-wrap: wrap + flex-basis minimum adalah cara membuat grid kartu responsif tanpa satu pun media query. Perhitungkan juga gap saat menentukan lebar basis, karena jarak antar item ikut memakan ruang saat item turun baris.

👀 Contoh dulu

.galeri { display: flex; flex-wrap: wrap; gap: 12px; }

/* flex: grow shrink basis */
.item { flex: 1 1 200px; }  /* minimal 200px, boleh melebar */

Hasilnya: Di layar lebar item berjejer beberapa per baris; saat layar menyempit, item otomatis turun ke baris berikutnya (bukan gepeng).

💡 Tanpa flex-wrap, item memaksa bertahan satu baris dan menyusut sampai isinya tidak terbaca.

📝 Sekarang giliranmu

Izinkan item turun baris dengan flex-wrap: wrap, dan beri .kartu properti flex: 1 1 120px.

Preview
← SebelumnyaBerikutnya →