Flexbox Dasar: Container dan Item

Kenapa Flexbox?

Sebelum Flexbox, mensejajarkan elemen secara vertikal tengah adalah mimpi buruk CSS. Flexbox (Flexible Box Layout) adalah sistem layout satu dimensi: mengatur item dalam satu baris atau satu kolom dengan mudah.

Menyalakan Flexbox

.wadah {
  display: flex;
}

Satu baris ini mengubah semua anak langsung menjadi flex item yang berjejer horizontal dari kiri ke kanan. Induknya disebut flex container.

flex-direction: arah utama

.wadah {
  display: flex;
  flex-direction: row; /* default: kiri ke kanan */
}

Nilai yang tersedia:

• row: horizontal, kiri ke kanan (default)
• row-reverse: horizontal, kanan ke kiri
• column: vertikal, atas ke bawah
• column-reverse: vertikal, bawah ke atas

Arah ini disebut main axis (sumbu utama). Sumbu tegak lurusnya disebut cross axis. Semua properti alignment Flexbox mengacu ke dua sumbu ini, jadi hafalkan konsepnya.

Item mengisi ruang: flex-grow

.wadah {
  display: flex;
}

.item {
  flex-grow: 1; /* semua item berbagi sisa ruang sama rata */
}

flex-grow menentukan porsi item dalam memakan sisa ruang kosong. Kalau satu item flex-grow: 2 dan lainnya 1, item itu dapat dua kali lipat ruang dibanding yang lain.

flex-shrink dan flex-basis

.item {
  flex: 1; /* shorthand: grow 1, shrink 1, basis 0 */
}

• flex-basis: ukuran awal item sebelum ruang dibagi (seperti width tapi untuk sumbu utama)
• flex-shrink: seberapa cepat item menyusut kalau ruang kurang (default 1, artinya boleh menyusut)
• flex adalah shorthand untuk ketiganya. flex: 1 adalah pola paling umum: "bagi ruang sama rata dan boleh menyusut".

Catatan teknis: flex: 1 sebenarnya berarti flex: 1 1 0% (basis 0), sedangkan flex: auto berarti flex: 1 1 auto (basis mengikuti konten). Bedanya terasa kalau konten item beda ukuran: dengan flex: 1 semua item benar-benar sama lebar, dengan flex: auto item yang kontennya besar dapat jatah lebih. Pilih sesuai kebutuhan.

Contoh: layout 3 kolom sama lebar

.barisan {
  display: flex;
  gap: 16px; /* jarak antar item, lebih rapi dari margin */
}

.barisan > div {
  flex: 1;
  padding: 20px;
  background: #f1f5f9;
  border-radius: 8px;
}

Tiga kolom otomatis sama lebar dan responsif menyusut. Tanpa Flexbox ini butuh float dan clearfix yang menyebalkan.

Rangkuman

display: flex mengubah anak menjadi item sebaris. flex-direction mengatur sumbu utama (dan melahirkan konsep main/cross axis). flex: 1 membagi ruang sama rata. Properti gap memberi jarak antar item tanpa margin manual.