Belajar CSS Flexbox untuk Layout Modern

Flexbox dirancang untuk menyusun elemen dalam satu dimensi: baris atau kolom. Jika kamu biasa kesulitan center item, spacing yang tidak rata, atau sidebar melenceng, Flexbox adalah jawaban awal yang benar.

Konsep Dasar

Container adalah elemen induk yang kamu beri display: flex;. Items adalah elemen anaknya. Ciri khasnya: container bisa mengatur arah, wrapping, alignment, dan distribusi ruang.

Properti Penting

1. flex-direction: row, column, wrap. 2. justify-content: mengatur sumbu utama, seperti center, space-between. 3. align-items: mengatur sumbu silang. 4. gap: kasih jarak antar item tanpa negatif margin.

Contoh Praktis

Navbar dengan menu di tengah: .navbar { display: flex; justify-content: space-between; align-items: center; } .nav-center { display: flex; gap: 16px; }

Tips: gunakan DevTools untuk menyesuaikan nilai Flexbox secara live; kamu akan paham otomatis.

Tinggalkan komentar dibawah jika ada pertanyaan.