Tata Letak Satu Dimensi dengan Flexbox

Kapan Menggunakan Flexbox?

**Flexbox (Flexible Box Layout) dirancang untuk mengatur tata letak dalam satu dimensi pada satu waktu**—baik sebagai satu baris horizontal (row) maupun satu kolom vertikal (column).

Gunakan Flexbox ketika Anda ingin:

• Menyusun bilah navigasi (logo di kiri, deretan menu di kanan).
• Menyejajarkan ikon dengan teks di dalam tombol atau lencana.
• Membagi ruang sisa di antara sekumpulan komponen yang ukurannya dinamis.
• Memaksa kaki kartu (card footer) selalu menempel rata di bagian paling bawah kartu meskipun panjang teks tiap kartu berbeda.

Begitu Anda menulis display: flex pada sebuah elemen:

1. Elemen tersebut menjadi Flex Container (wadah flex).
2. Seluruh **anak langsung (direct children) di dalamnya otomatis menjadi Flex Items**. (Cucu di dalam anak tidak ikut menjadi flex item kecuali anaknya juga diberi display: flex).

1. Memahami Dua Poros Flexbox: Main Axis dan Cross Axis

Kunci utama agar Anda tidak pernah bingung antara justify-content dan align-items adalah memahami bahwa Flexbox bekerja berdasarkan dua poros yang saling tegak lurus:

A. Saat flex-direction: row (Bawaan):
   Main Axis (Poros Utama)  ===> Horizontal (Kiri ke Kanan)
   Cross Axis (Poros Silang) ===> Vertikal (Atas ke Bawah)

   +-------------------------------------------------------+
   |  [ Item 1 ]     [ Item 2 ]     [ Item 3 ]             |  <-- justify-content mengatur
   |                                                       |      sepanjang Main Axis (Horizontal)
   +-------------------------------------------------------+
         ^
         |-- align-items mengatur sepanjang Cross Axis (Vertikal)


B. Saat flex-direction: column:
   Main Axis (Poros Utama)  ===> Vertikal (Atas ke Bawah)
   Cross Axis (Poros Silang) ===> Horizontal (Kiri ke Kanan)

Aturan Menghafal Perataan di Flexbox:

• justify-content SELALU mengatur distribusi di sepanjang Main Axis (Poros Utama):
  • flex-start (awal poros), center (tengah), flex-end (ujung poros)
  • space-between (item pertama dan terakhir menempel di ujung, ruang kosong dibagi rata di tengah)
  • space-around / space-evenly
• align-items SELALU mengatur perataan di sepanjang Cross Axis (Poros Silang):
  • stretch (bawaan: merentangkan tinggi item agar sama tinggi dengan kontainer)
  • center (rata tengah secara tegak lurus — sangat sering dipakai untuk menyejajarkan ikon dan teks!)
  • flex-start, flex-end, baseline (sejajar garis dasar huruf teks).

2. Membungkus Baris (flex-wrap) dan Mengatur Jarak (gap)

Secara bawaan, Flexbox berusaha memaksakan semua anak masuk ke dalam satu baris tunggal (flex-wrap: nowrap), bahkan jika harus menyempitkan item-item tersebut. Jika Anda ingin item turun ke baris baru saat ruang tidak lagi cukup, tambahkan flex-wrap: wrap.

Untuk memberi jarak antar-item di dalam Flexbox, jangan lagi menggunakan trik margin negatif lama; gunakan properti gap (serta row-gap dan column-gap, berstatus Baseline Widely Available):

.daftar-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem; /* 0.5rem jarak antar-baris, 0.75rem jarak antar-kolom */
  align-items: center;
}

Keunggulan gap dibandingkan margin: jarak gap hanya disisipkan di antara item yang bertetangga, tidak pernah bocor menambahkan jarak ekstra di tepi luar kontainer!

3. Mengendalikan Ukuran Flex Item: flex-grow, flex-shrink, dan flex-basis

Ketiga properti ini dipasang pada anak (Flex Item), bukan pada wadah induknya, dan hampir selalu ditulis menggunakan singkatan flex: <grow> <shrink> <basis>:

1. flex-basis (Ukuran Awal Ideal): Ukuran awal item di sepanjang Main Axis sebelum ruang kosong dibagi atau ruang sempit dipangkas (bawaannya auto, yaitu mengikuti width/height atau isi kontennya).
2. flex-grow (Faktor Tumbuh): Menentukan apakah item boleh membesar menyerap ruang kosong yang tersisa di dalam kontainer (bawaannya 0 = tidak ikut membesar).
3. flex-shrink (Faktor Susut): Menentukan apakah item boleh menyusut ketika ruang kontainer lebih sempit dari jumlah ukuran item (bawaannya 1 = boleh menyusut).

Empat Nilai Singkatan flex yang Wajib Anda Hafal

4. Tiga Pola Komponen Dunia Nyata dengan Flexbox

/* Pola 1: Bilah Navigasi (Logo dan Menu di kiri, Tombol Masuk mendorong ke ujung kanan) */
.navbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.navbar .tombol-masuk {
  /* margin-inline-start: auto pada flex item akan menyerap seluruh ruang kosong di kirinya! */
  margin-inline-start: auto;
}

/* Pola 2: Kartu dengan Tinggi Seragam dan Tombol Selalu Rata di Dasar Bawah */
.kartu {
  display: flex;
  flex-direction: column;
}
.kartu .kaki-kartu {
  margin-block-start: auto; /* Mendorong kaki kartu ke ujung paling bawah */
  padding-block-start: 1rem;
}

/* Pola 3: Mencegah Ikon SVG Gepeng di Samping Teks Panjang */
.item-fitur {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.item-fitur svg {
  flex-shrink: 0; /* Ikon tidak akan pernah menyusut meskipun teks di sebelahnya panjang */
}

Latihan Praktik: Membangun Bilah Navigasi dan Deretan Kartu Fitur

Buatlah berkas flexbox-komponen.html dan flexbox.css yang berisi:

1. Sebuah <header class="navbar"> yang menyejajarkan logo di kiri, tautan navigasi di tengah, dan tombol aksi di ujung kanan menggunakan display: flex, align-items: center, gap, dan margin-inline-start: auto.
2. Tiga kartu fitur berdampingan di mana salah satu kartu memiliki 4 baris paragraf sementara dua kartu lainnya hanya 1 baris paragraf, namun tombol "Pelajari Modul" di bagian bawah ketiga kartu tetap sejajar rata di garis dasar yang sama menggunakan flex-direction: column dan margin-block-start: auto.