Flexbox

Susun baris-kolom lentur dengan display: flex.

Pahami konsepnya

Flexbox adalah sistem tata letak satu-dimensi: ia hebat menyusun anak-anak dalam SATU arah — baris atau kolom. Cukup display: flex pada wadah, dan anak-anaknya langsung berbaris rapi dengan tinggi seragam, siap diatur. Sebelum flexbox, hal serupa butuh trik float dan clear yang rapuh; kini satu properti menuntaskan semuanya.

Properti sang wadah mengatur arah dan distribusi: flex-direction memilih row (baris) atau column (kolom); justify-content mengatur sepanjang sumbu utama (flex-start, center, space-between, space-around); align-items mengatur sumbu silangnya (stretch bawaan, center, flex-start); gap memberi jarak antar anak tanpa margin; dan flex-wrap: wrap membolehkan anak pindah baris bila tak muat.

Properti sang anak mengatur porsi: flex: 1 membuat anak memenuhi sisa ruang secara adil; flex: 2 menuntut porsi dua kali; flex: 0 0 200px mengunci lebar. Kombinasi klasik: sidebar tetap 240px plus konten flex: 1 — layout dua kolom yang tak bisa hancur. Navbar, kartu, form label-input, hampir semua antarmuka modern adalah flexbox menyamar.

Coba contoh kode

.navbar {
  display: flex;
  align-items: center;      /* tegak: tengah */
  justify-content: space-between;  /* mendatar: meregang */
  gap: 16px;
  padding: 12px 20px;
}

.badan {
  display: flex;
  gap: 24px;
}
.sisi { flex: 0 0 240px; }  /* kaku 240px */
.isi { flex: 1; }            /* menyerap sisanya */

Navbar memakai tiga pengatur wadah sekaligus: anak-anak sejajar tengah secara vertikal, logo kiri dan menu kanan teregang space-between, gap menjaga jarak. Layout badan menunjukkan duo porsi: sidebar terkunci 240px sementara isi mengembang flex: 1 — ubah lebar jendela dan perhatikan hanya isi yang melebar.

Kartu merata penuh

.kartu-grid {
  display: flex;
  flex-wrap: wrap;   /* muat? baris baru */
  gap: 20px;
}

.kartu-grid > .kartu {
  flex: 1 1 260px;  /* dasar 260, boleh tumbuh & menyusut */
}

Angka ajaib ada di flex: 1 1 260px — dasar 260px per kartu, boleh tumbuh mengisi ruang dan menyusut saat sempit; flex-wrap memindahkan yang tak muat ke baris berikut. Hasilnya grid kartu responsif tanpa satu pun media query.

Latihan singkat

Bangun navbar flex (logo kiri, menu kanan, tengah vertikal) dan layout dua kolom sidebar-konten, lalu uji di lebar layar berbeda.