Setelah kuasai dasar Flexbox, kamu bakal nemuin pertanyaan baru: "Gimana kalau item-item aku banyak banget, gak muat di satu baris?" Atau "Gimana kalau aku mau satu item ditaro beda dari sebelahnya?" Disinilah lesson alignment lanjut masuk — flex-wrap, align-content, gap, align-self. Property ini yang ngebedain layout flexbox basic vs production-ready.

💡 Center horizontal + vertical dalam 3 baris. Dulu butuh hack absolute + transform translate, sekarang cukup display: flex; justify-content: center; align-items: center;. Salah satu pencapaian terbesar CSS modern — masalah lama yang dibikin sederhana.

flex-wrap — mengatur apakah item boleh turun ke baris baru:

.container {
  display: flex;
  flex-wrap: wrap;    /* Item turun ke baris baru jika penuh */
  gap: 16px;          /* Jarak antar item */
}

align-content — mengatur jarak antar baris saat wrap aktif (mirip justify-content tapi untuk sumbu silang):

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

gap — memberikan jarak antar flex item:

.container {
  display: flex;
  gap: 16px;          /* Jarak baris dan kolom sama */
  row-gap: 20px;      /* Jarak antar baris */
  column-gap: 10px;   /* Jarak antar kolom */
}

align-self — mengatur perataan satu item secara individual (override align-items):

.item-khusus {
  align-self: flex-end;
}

Kombinasi justify-content: center dan align-items: center adalah cara paling mudah untuk menempatkan elemen tepat di tengah:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

🎭 Analogi sehari-hari

flex-wrap + gap + align-content = mengatur antrian penonton di studio TV dengan banyak baris kursi. Tidak muat di satu baris? Pindah ke baris bawah (wrap). Jarak antar baris (gap). Posisi kursi ke atas/tengah/bawah (align-content).

⚠️ Jebakan yang sering ditemui

• flex-wrap: nowrap (default) = item terus-menerus menyusut tanpa pindah baris. Tambah wrap untuk multi-line.
• align-content cuma jalan dengan flex-wrap: wrap + multi-line — beda dengan align-items (single line atau cross-axis per item).
• gap di flex = modern (Safari 14.1+). IE/Edge legacy tidak support — pakai margin trick.
• align-self override align-items untuk item itu saja — pengecualian.
• Center horizontal + vertical dengan flex: justify-content: center; align-items: center. 3 baris CSS untuk masalah lama yang dulu ribet.
• min-height: 100vh di parent + flex center sering perlu, biar tinggi cukup untuk centered.