Memahami CSS Flexbox — Panduan Visual Interaktif

CSS Flexbox adalah sistem layout satu dimensi yang mengatur item secara horizontal atau vertikal. Sebelum Flexbox ada, developer harus bergantung pada float, position: absolute, dan hack margin: auto untuk centering sederhana. Sekarang? Satu baris CSS.

Tapi banyak pemula yang bingung: flex-direction, justify-content, align-items… propertinya banyak dan efeknya tergantung satu sama lain. Mari kita pahami dengan demo interaktif.

Coba Langsung

Ubah setiap properti di bawah dan lihat hasilnya secara real-time. Perhatikan bagaimana kombinasi flex-direction dengan justify-content dan align-items menghasilkan layout yang berbeda:

Coba Sendiri

flex-direction

justify-content

align-items

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

Dua Sumbu Flexbox

Kunci memahami Flexbox ada di dua sumbu:

Main axis — sumbu utama, ditentukan oleh flex-direction. Default-nya horizontal (kiri → kanan).
Cross axis — sumbu silang, selalu tegak lurus dengan main axis.

Ini kenapa propertinya terasa membingungkan: justify-content mengatur item di main axis, sementara align-items mengatur di cross axis. Kalau kamu ubah flex-direction ke column, kedua sumbu ikut bertukar!

Tips: Kalau bingung sumbu mana yang mana, coba ubah flex-direction di demo di atas dari row ke column — lihat bagaimana justify-content yang tadinya horizontal jadi vertikal.

Properti yang Paling Sering Dipakai

`justify-content` — Spacing di Main Axis

Value	Efek
`flex-start`	Item rapat ke awal (default)
`center`	Item di tengah
`flex-end`	Item rapat ke akhir
`space-between`	Item tersebar, item pertama dan terakhir di tepi
`space-around`	Spacing sama di kiri-kanan setiap item
`space-evenly`	Spacing benar-benar sama rata

`align-items` — Posisi di Cross Axis

Value	Efek
`flex-start`	Item rapat ke atas
`center`	Item di tengah vertikal
`flex-end`	Item rapat ke bawah
`stretch`	Item memanjang mengisi container

Pattern yang Wajib Dihafal

Centering sempurna (horizontal + vertikal):

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

Navbar dengan logo kiri, menu kanan:

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

Card layout sejajar:

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

Footer push ke bawah:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex-grow: 1; }

Kesalahan Umum Pemula

Lupa display: flex — Semua properti flex tidak akan bekerja tanpa ini di container.
Bingung sumbu — Ingat: justify = main axis, align = cross axis. Kalau flex-direction: column, main axis jadi vertikal.
Tidak pakai gap — Masih pakai margin antar flex item? Pakai gap lebih bersih dan konsisten.
Lupa flex-wrap — Default-nya nowrap, jadi item akan menyusut. Tambahkan flex-wrap: wrap kalau mau item pindah baris.

Langkah Selanjutnya

Setelah paham Flexbox, langkah berikutnya adalah CSS Grid — sistem layout dua dimensi yang lebih powerful untuk layout halaman penuh. Flexbox untuk satu arah (navbar, card row), Grid untuk dua arah (page layout, gallery).

Di Hyper Sheets, kamu bisa latihan Flexbox sambil bermain game Kodok Flexbox — atur posisi kodok dengan properti Flexbox. Dan kalau sudah siap, ada Kebun Grid untuk belajar CSS Grid dengan cara yang sama serunya.