Flexbox Alignment: justify dan align

Dua sumbu, dua properti

Ingat konsep main axis (sumbu utama, mengikuti flex-direction) dan cross axis (sumbu silang). Flexbox punya properti terpisah buat masing-masing:

• justify-content: sejajar di sepanjang main axis
• align-items: sejajar di sepanjang cross axis

justify-content

.wadah {
  display: flex;
  justify-content: center; /* item menumpuk di tengah horizontal */
}

Nilai populer:

• flex-start: rapat ke awal (default)
• flex-end: rapat ke akhir
• center: tengah
• space-between: item pertama di ujung awal, terakhir di ujung akhir, sisa ruang dibagi rata di antaranya
• space-around: ruang sama di kiri-kanan tiap item
• space-evenly: semua jarak (termasuk ke tepi) sama persis

space-between adalah favorit buat navbar: logo di kiri, menu di kanan.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

align-items

.wadah {
  display: flex;
  align-items: center; /* item tengah secara vertikal */
}

Nilai populer:

• stretch: item melar setinggi container (default)
• flex-start / flex-end / center: rapat atas/bawah/tengah
• baseline: sejajar berdasarkan garis dasar teks (berguna kalau ukuran font beda-beda)

Kombinasi justify-content: center + align-items: center adalah resep centering sempurna (tengah horizontal DAN vertikal) yang dulu mustahil dilakukan dengan mudah:

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

align-self: pengecualian satu item

Kalau satu item mau beda perlakuan dari yang lain:

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

.item-spesial {
  align-self: flex-start; /* cuma item ini yang nempel atas */
}

Sumbu berubah saat direction berubah

Ini yang sering bikin bingung: kalau flex-direction: column, main axis jadi vertikal. Artinya justify-content: center sekarang menengahkan secara vertikal, dan align-items: center menengahkan horizontal. Propertinya tidak berubah, yang berubah adalah sumbunya.

Catatan teknis: cara cepat mengingat: justify selalu mengikuti arah tulisan/flex-direction (main axis), align selalu yang melintangnya (cross axis). Berlaku juga di Grid. Hafalkan kalimat ini dan kamu tidak akan tertukar lagi.

Rangkuman

justify-content buat main axis, align-items buat cross axis, align-self buat pengecualian satu item. Kombinasi center + center adalah centering sempurna. Selalu cek flex-direction dulu sebelum menebak arah kerja properti alignment.