Responsive Flexbox

Mesin flexbox sudah kita kuasai di section Flexbox, dan demo pada chapter Konsep Responsive Design sudah mencicipinya lewat flex: 1 1 180px. Sekarang kita formalisasi tekniknya: kombinasi flex-wrap dan flex-basis sebagai mesin reflow otomatis, pembacaan satu deklarasi flex sebagai tiga keputusan responsif sekaligus, dan pembalikan arah lewat media query. Di ujung chapter, dua pola yang paling sering kita rakit di dunia nyata: baris form dan media object.

Mesin Reflow: flex-wrap dan flex-basis #

css
.rak-produk {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.rak-produk > * {
  flex: 1 1 240px;
}

Demo berikut merakit lima produk dengan pola di atas — perkecil dan perbesar jendela browser untuk melihat raknya menata ulang diri:

Semua perpindahan baris di demo ditentukan oleh basis 220px-nya, bukan oleh media query.

Membedah flex: 1 1 240px #

Satu deklarasi, tiga keputusan responsif:

Komponen	Nilai	Peran responsifnya
`flex-basis`	`240px`	lebar ideal tiap item — penentu kapan item pindah baris
`flex-grow`	`1`	sisa ruang satu baris dibagi rata ke item-item di baris itu
`flex-shrink`	`1`	item boleh menyusut sebelum baris meluber

Ketiganya bekerja serentak: basis menentukan jumlah kolom per baris, grow merapikan sisa ruang, shrink melindungi layar sempit. Naikkan basis menjadi 340px untuk kartu yang lapang, atau turunkan ke 180px untuk chip kecil — satu angka itulah penentu jumlah kolomnya.

Dibandingkan dengan grid, pendekatan ini lebih longgar: item tidak dibagi ke dalam track yang sama, melainkan berkelompok per baris — kartu terakhir pada baris yang tidak penuh boleh lebih lebar dari kartu-kartu di atasnya. Bila konsistensi lebar antarbaris justru yang dibutuhkan, itu tugas grid pada chapter berikutnya.

Membalik Arah dengan Media Query #

css
.berita {
  display: flex;
  flex-direction: column;   /* dasar ponsel: thumbnail di atas teks */
  gap: 12px;
}
@media (min-width: 640px) {
  .berita {
    flex-direction: row;
    align-items: center;
  }
  .berita img {
    flex-shrink: 0;         /* thumbnail jangan sampai gepeng */
  }
}

Pola thumbnail-plus-teks ini dikenal luas sebagai media object — bentuk dasar daftar berita, komentar, dan daftar putar. flex-shrink: 0 menjaga thumbnail tetap pada ukurannya, sementara teks menyesuaikan sisa ruang.

Demo berikut menampilkan media object itu pada dua lebar tetap berdampingan — kiri kondisi dasar layar sempit, kanan hasil media query min-width: 640px:

Varian yang sama sering dipakai di kolom komentar: avatar kecil 40px dengan flex-shrink: 0 di kiri, teks mengisi sisanya. Bila thumbnail perlu berpindah ke kanan, cukup flex-direction: row-reverse pada breakpoint yang sama — urutan markup tidak perlu disentuh.

Pola Form: Pencarian yang Menyusun Diri #

css
.form-cari {
  display: flex;
  flex-direction: column;   /* dasar: input di atas, tombol di bawah */
  gap: 10px;
}
@media (min-width: 560px) {
  .form-cari {
    flex-direction: row;
  }
  .form-cari input {
    flex: 1;                /* input memakan sisa ruang; tombol tetap pas */
  }
}

Input dan tombol berpasangan adalah media object dengan isi berbeda: dasar vertikal untuk ponsel, penyampingan saat lebar. flex: 1 pada input — bentuk pendek dari flex: 1 1 0% — membuat input menelan sisa ruang sehingga tombol tetap berukuran pas pada lebar kontennya, tidak ikut memanjang.

Kesalahan Umum #

Tiga keliru yang paling sering muncul saat pertama memakai pola ini:

Kesalahan	Akibat di browser	Perbaikan
`flex: 1` tanpa `flex-wrap` pada container	item terdesak mengecil di layar sempit dan tidak pernah pindah baris	tambahkan `flex-wrap: wrap` dan beri basis pada item
Lupa `min-width: 0` pada item berkonten lebar	baris tetap meluber walau sudah wrap	pasang `min-width: 0` — dibedah tuntas di chapter Mencegah Horizontal Overflow
Media query untuk hal yang bisa diselesaikan `wrap`	jumlah breakpoint membengkak tanpa kebutuhan	serahkan perpindahan baris pada `flex-basis`

Ringkasan #

flex-wrap plus flex-basis memberi reflow otomatis, satu deklarasi flex merangkum tiga keputusan responsif, dan media query cukup dipakai untuk membalik arah — sisanya biarkan mesin flexbox bekerja. Prinsip yang sama berlanjut ke tata letak dua dimensi: chapter berikutnya membawa teknik ini ke CSS Grid, tempat jumlah kolom dan peta wilayah bisa didefinisikan ulang per breakpoint.