Panduan Praktis CSS Flexbox untuk Tata Letak Fleksibel

Mengapa Flexbox Mengubah Segalanya?

Sebelum Flexbox hadir, menyusun elemen web agar berjejer rapi ke samping sering kali melibatkan trik float dan clear-fix yang rapuh. Flexbox (Flexible Box Layout) dirancang khusus untuk membagikan ruang secara proporsional dan meratakan posisi elemen dengan cara yang sangat bersih.

Dua Aktor: Container dan Items

Untuk mengaktifkan Flexbox, kita cukup memberikan deklarasi display: flex pada elemen pembungkusnya (container).

.card-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

Properti Penting pada Container

• justify-content: Mengatur perataan item di sepanjang sumbu utama (horizontal jika row). Nilai populer: flex-start, center, space-between.
• align-items: Mengatur perataan item tegak lurus sumbu utama (vertikal jika row). Nilai populer: center, stretch.
• flex-wrap: wrap: Mengizinkan elemen turun ke baris berikutnya jika ruang layar mengecil (sangat krusial untuk tampilan mobile).
• gap: Memberikan jarak seragam antarelemen tanpa perlu lagi mengatur margin kanan-kiri yang rumit.

"Kunci menguasai tata letak web adalah memahami relasi antara wadah (parent) dan anak di dalamnya (children)."