Sebelum tahun 2015, bikin tata letak sederhana di CSS itu mimpi buruk. Pengen 3 kotak sebaris rata tengah? Harus jago float, clear, display: table-cell, hack vertical-align, dan trik aneh lainnya. Sampai akhirnya Flexbox datang — sistem layout 1 dimensi yang ngerjain semua hal yang dulu butuh 50 baris CSS jadi cuma 3 baris. Sekarang Flexbox itu kayak roti tawar — selalu ada di dapur web modern.

🤔 Tahukah kamu? Flexbox dirancang khusus buat layout 1 dimensi (sebaris ATAU sekolom). Mau layout 2D yang lebih kompleks (baris DAN kolom barengan)? Itu kerjaan CSS Grid (lesson selanjutnya). Dua tools beda buat job beda — bukan kompetitor, tapi pelengkap.

Untuk mengaktifkan Flexbox, tambahkan display: flex pada elemen parent (container):

.container {
  display: flex;
}

Sumbu utama vs sumbu silang — kunci utama Flexbox. Arahnya tergantung flex-direction:

Properti utama pada flex container:

• flex-direction — arah susunan (row, column, row-reverse, column-reverse)
• justify-content — perataan di sepanjang sumbu utama
• align-items — perataan di sepanjang sumbu silang

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Nilai justify-content:

• flex-start — rata kiri/atas (default)
• flex-end — rata kanan/bawah
• center — rata tengah
• space-between — jarak merata, tanpa jarak di tepi
• space-around — jarak merata, dengan jarak di tepi
• space-evenly — jarak benar-benar merata

Secara default, flex-direction adalah row sehingga elemen tersusun horizontal.

🎭 Analogi sehari-hari

Flexbox = antrian orang di lift. Sumbu utama = arah antrian (horizontal row atau vertikal column). Sumbu silang = tegak lurus arah antrian. justify-content = sebar/pusatkan di sumbu antrian. align-items = atas/tengah/bawah di sumbu silang. Item bisa fleksibel ukuran (orang gemuk vs tipis), gak harus seragam.

⚠️ Jebakan yang sering ditemui

• min-width: auto default — flex item tidak akan menyusut lebih kecil dari intrinsic size konten-nya. Teks panjang bisa overflow container. Fix: min-width: 0 di flex item.
• align-items: center di item dengan tinggi penuh — kalau item tunggal sudah height: 100%, align-items tidak ada efek. Hapus height di item dulu.
• flex-wrap: nowrap default — banyak item ditambahkan, mereka menyusut mengikuti container, tidak turun ke baris baru. Tambahkan flex-wrap: wrap.
• gap di flexbox baru didukung modern — kalau target Safari ≤14 / IE, pakai margin trick lama atau cek caniuse.
• justify-content: space-between dengan satu item — item akan stuck di kiri (flex-start). Untuk center single item, pakai justify-content: center.

TL;DR: Flexbox = sistem layout 1 dimensi. Set display: flex di parent, anak otomatis sebaris. flex-direction tentuin sumbu utama (row/column). justify-content rata di sumbu utama, align-items rata di sumbu silang. Untuk centering: justify-content: center; align-items: center — 3 baris CSS untuk problem yang dulu butuh 50+ baris hack.

🎯 Flexbox vs Grid — pilih yang mana?

• 1 dimensi (deretan tombol, navigasi, list horizontal/vertikal saja) → Flexbox
• 2 dimensi (layout halaman dengan baris × kolom presisi, dashboard, gallery card) → Grid
• Konten yang nentuin ukuran (bubble chat, tags) → Flexbox
• Layout yang nentuin ukuran (sidebar 250px + content sisa) → Grid

Kombinasi paling sering di production: Grid buat layout halaman utama, Flexbox di dalam tiap cell-nya buat susunan internal. Bukan kompetitor — pelengkap.