Belajar Flexbox CSS: Panduan Lengkap untuk Pemula

Apa itu Flexbox?

Flexbox (Flexible Box Layout) adalah model layout CSS yang dirancang khusus untuk mengatur elemen dalam satu dimensi — baris atau kolom. Sebelum Flexbox ada, developer harus bergulat dengan float, inline-block, dan position hanya untuk memusatkan sebuah div. Sekarang? Tiga baris CSS sudah cukup.

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

Konsep Dasar

Ada dua pemain utama di Flexbox:

• Flex Container — elemen induk yang diberi display: flex
• Flex Items — elemen anak langsung dari flex container

Semua properti Flexbox dibagi dua: properti untuk container dan properti untuk item.

Properti Container yang Wajib Tahu

flex-direction

Menentukan arah sumbu utama (main axis).

.container {
  flex-direction: row;        /* default: horizontal */
  flex-direction: column;     /* vertikal */
  flex-direction: row-reverse;
  flex-direction: column-reverse;
}

justify-content

Mengatur posisi item di sepanjang main axis.

.container {
  justify-content: flex-start;    /* default */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between; /* ruang di antara item */
  justify-content: space-around;  /* ruang di sekitar item */
  justify-content: space-evenly;  /* ruang merata */
}

align-items

Mengatur posisi item di sepanjang cross axis (tegak lurus dari main axis).

.container {
  align-items: stretch;     /* default: item memenuhi tinggi container */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline;
}

flex-wrap

Secara default, semua flex item dipaksa masuk satu baris. flex-wrap mengizinkan item untuk pindah ke baris berikutnya.

.container {
  flex-wrap: nowrap;   /* default */
  flex-wrap: wrap;     /* item wrap ke baris baru */
  flex-wrap: wrap-reverse;
}

gap

Mengatur jarak antar item. Jauh lebih bersih dari margin.

.container {
  gap: 1rem;
  gap: 1rem 2rem; /* row-gap column-gap */
}

Properti Item yang Penting

flex

Shorthand untuk flex-grow, flex-shrink, dan flex-basis.

.item {
  flex: 1;        /* item tumbuh mengisi ruang tersisa */
  flex: 0 0 200px; /* lebar tetap 200px, tidak grow/shrink */
}

align-self

Override align-items untuk satu item spesifik.

.item-special {
  align-self: flex-end;
}

order

Mengubah urutan visual item tanpa mengubah HTML.

.item-first {
  order: -1; /* tampil paling depan */
}

Trik Praktis

Centering sempurna

Cara paling bersih untuk memusatkan konten secara horizontal dan vertikal:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar yang responsif

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

Card grid sederhana

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px; /* minimum 300px, bisa grow */
}

Kapan Pakai Flexbox vs Grid?

Kasus	Gunakan
Layout satu dimensi (baris ATAU kolom)	Flexbox
Layout dua dimensi (baris DAN kolom)	Grid
Navbar, header	Flexbox
Galeri foto, dashboard	Grid
Centering konten	Flexbox
Layout halaman utama	Grid

Kesimpulan

Flexbox adalah alat wajib setiap frontend developer. Setelah kamu paham konsep main axis dan cross axis, semua propertinya jadi masuk akal. Langkah selanjutnya: latihan langsung di browser, dan eksplorasi CSS Grid untuk layout dua dimensi.

Kalau mau latihan lebih dalam, cek kelas HTML & CSS di Kelas Frontend — kita bahas Flexbox lewat studi kasus nyata, bukan cuma teori.