← CSS22 / 62

flex: 1 untuk mengisi ruang sisa

flex: 1 pada item berarti 'ambil semua ruang sisa'. Ini shorthand dari flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Pola paling berguna: sidebar berlebar tetap + konten flex: 1 yang menyesuaikan sisa ruang — layout aplikasi klasik dalam dua baris CSS. Perlu diingat flex: 1 membuat item mengabaikan lebar aslinya, jadi kalau kamu butuh lebar minimum tetap, tulis lengkap seperti flex: 1 1 200px.

👀 Contoh dulu

.wadah { display: flex; }
.kiri  { width: 80px; }   /* lebar tetap        */
.kanan { flex: 1;     }   /* ambil semua sisanya */

Hasilnya: .kiri tetap 80px di layar apa pun, sementara .kanan otomatis melebar mengisi ruang yang tersisa.

💡 Kalau .kiri dan .kanan keduanya flex: 1, ruang akan dibagi rata 50:50.

📝 Sekarang giliranmu

Beri .konten properti flex: 1 agar mengisi ruang sisa di samping sidebar.

Preview

← Sebelumnya Berikutnya →