CSS Flexbox: Solusi Layout Modern yang Fleksibel

Apa itu Flexbox?

Flexbox (Flexible Box Layout) adalah modul layout CSS yang dirancang untuk mempermudah pengaturan posisi, jarak, dan penyelarasan elemen dalam satu dimensi (baris atau kolom).

Kalau dulu kita sering ribet dengan:

• float
• position
• inline-block

Flexbox hadir sebagai solusi yang lebih rapi, responsif, dan intuitif.

---

Konsep Dasar Flexbox

Flexbox bekerja dengan dua komponen utama:

1. Flex Container → elemen induk
2. Flex Items → elemen anak di dalam container

.container {
  display: flex;
}

Begitu display: flex ditambahkan, seluruh anak elemen otomatis menjadi flex items.

---

Arah Utama: flex-direction

Menentukan arah penataan item.

.container {
  flex-direction: row; /* default */
}

Pilihan nilai:

• row → kiri ke kanan
• row-reverse
• column → atas ke bawah
• column-reverse

---

Penyelarasan Horizontal: justify-content

Mengatur posisi item sepanjang sumbu utama.

.container {
  justify-content: center;
}

Nilai populer:

• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

---

Penyelarasan Vertikal: align-items

Mengatur posisi item tegak lurus sumbu utama.

.container {
  align-items: center;
}

Nilai umum:

• stretch (default)
• center
• flex-start
• flex-end
• baseline

---

Membungkus Elemen: flex-wrap

Secara default, Flexbox memaksa item tetap satu baris.

.container {
  flex-wrap: wrap;
}

Nilai:

• nowrap (default)
• wrap
• wrap-reverse

---

Properti Penting pada Flex Item

flex-grow

Menentukan seberapa besar item boleh membesar.

.item {
  flex-grow: 1;
}

---

flex-shrink

Mengatur seberapa besar item boleh mengecil.

.item {
  flex-shrink: 0;
}

---

flex-basis

Ukuran awal item sebelum ruang dibagi.

.item {
  flex-basis: 200px;
}

Shortcut:

.item {
  flex: 1 0 200px;
}

---

Contoh Kasus Nyata: Navbar Flexbox

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Flexbox sangat cocok untuk:

• Navbar
• Card layout
• Centering elemen
• Responsive grid sederhana

---

Kelebihan Flexbox

✅ Mudah dipelajari
✅ Responsif tanpa media query berlebihan
✅ Cocok untuk layout satu dimensi
✅ Bersih & readable

---

Flexbox vs Grid

Flexbox	Grid
1 dimensi	2 dimensi
Cocok untuk komponen	Cocok untuk layout halaman
Lebih fleksibel	Lebih struktural

💡 Gunakan Flexbox untuk komponen, Grid untuk layout besar.

---

Flexbox adalah fondasi wajib bagi web developer modern. Dengan memahami konsep dasarnya, kamu bisa membuat layout yang rapi, responsif, dan mudah dikembangkan.

“Jika layout terasa ribet, kemungkinan besar Flexbox-lah jawabannya.”