BLANTERORIONv101
Home CSS

📐 CSS Flexbox: Panduan Lengkap Layout Responsif Satu Dimensi untuk Pemula

12 Desember 2025
📐 CSS Flexbox: Panduan Lengkap Layout Responsif Satu Dimensi untuk Pemula

 📐 CSS Flexbox: Revolusi Tata Letak Web Responsif

Setelah menguasai Box Model, saatnya beralih ke alat layout paling kuat di CSS: Flexbox(Flexible Box Layout Module). Flexbox dirancang untuk membantu Anda menata elemen di dalam satu wadah secara efisien dan responsif, baik dalam baris (horizontal) maupun kolom (vertikal). Ini sangat ideal untuk navigasi, bilah alat, atau menyusun elemen di dalam komponen.

Prinsip Dasar Flexbox: Kontainer dan Item

Flexbox bekerja berdasarkan dua entitas utama:

  1. Flex Container (Wadah Fleksibel): Elemen induk yang menampung semua elemen fleksibel.
  2. Flex Items (Item Fleksibel): Elemen anak di dalam wadah.

Untuk mengaktifkan Flexbox pada wadah, cukup tambahkan properti ini ke CSS:

.wadah {
  display: flex;
}

Properti Kunci pada Flex Container

Properti ini diterapkan pada elemen induk (.wadah):

flex-direction:Menentukan arah utama layout (Baris: row atau Kolom: column).  justify-content: Mengatur item di sepanjang Sumbu Utama (Main Axis), misalnya untuk meratakan ke tengah (center) atau memberi jarak merata (space-between). align-items:Mengatur item di sepanjang Sumbu Silang (Cross Axis), biasanya untuk perataan vertikal seperti center.

Properti Kunci pada Flex Items

Properti ini diterapkan pada elemen anak (.item):

flex-grow: Menentukan seberapa besar item harus tumbuh relatif terhadap item lain untuk mengisi ruang kosong. Nilai 1 berarti item akan tumbuh secara proporsional. flex-shrink: Menentukan seberapa besar item harus menyusut jika ruang wadah tidak mencukupi.  flex-basis: Menentukan ukuran awal item sebelum ruang tersisa didistribusikan.

Shorthand (flex): Tiga properti di atas sering digabungkan dalam satu properti shorthand: flex: grow shrink basis. Misalnya, flex: 1 1 0 atau flex: 1 (yang berarti flex: 1 1 0).

Keunggulan Flexbox

Dengan Flexbox, tugas-tugas yang dulunya sulit, seperti menempatkan elemen persis di tengah wadah, menjadi sangat mudah. Anda dapat melakukannya dengan hanya dua baris kode CSS pada wadah:

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

Menguasai Flexbox adalah keterampilan penting untuk membuat layout komponen, header, dan navigasi yang adaptif dan rapi tanpa perlu menggunakan float atau tabel yang kuno.

Komentar