CSS Flexbox: Perbedaan justify-content dan align-items

Rumus Ajaib Menengahkan Elemen di CSS

Sebelum Flexbox ada, membuat sebuah teks benar-benar berada di tengah sebuah kotak (baik secara vertikal maupun horizontal) adalah hal yang sangat sulit. Sekarang, setiap *Frontend Developer* punya mantra andalan yang diketik hampir tanpa berpikir:

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

Mantra di atas dijamin akan menengahkan apapun. Tapi, saat kamu ingin membuat jarak yang rapi (seperti Navbar), kamu harus paham tugas spesifik dari justify-content dan align-items.

Konsep Sumbu Utama (Main Axis) vs Sumbu Silang (Cross Axis)

Flexbox bekerja berdasarkan sumbu. Secara bawaan (default), sumbu utama Flexbox adalah menyamping dari kiri ke kanan (Row). Sumbu silangnya adalah menurun dari atas ke bawah (Column).

1. justify-content (Mengatur di Sumbu Utama)

Karena sumbu utama bawaannya adalah kiri-ke-kanan, maka justify-content bertugas mengatur posisi elemen secara Horizontal (Menyamping).

• justify-content: flex-start; → Semua merapat ke Kiri.
• justify-content: center; → Semua berkumpul di Tengah.
• justify-content: flex-end; → Semua merapat ke Kanan.
• justify-content: space-between; → Elemen pertama mentok kiri, elemen terakhir mentok kanan, sisanya dibagi rata di tengah (Sangat sering dipakai untuk Navbar!).

2. align-items (Mengatur di Sumbu Silang)

Jika justify-content mengatur kiri-kanan, maka align-items bertugas mengatur elemen secara Vertikal (Atas-Bawah).

• align-items: flex-start; → Merapat ke atap (atas).
• align-items: center; → Melayang persis di tengah secara vertikal.
• align-items: flex-end; → Merapat ke lantai (bawah).

Pengecualian: flex-direction: column

Awas jebakan! Jika kamu mengubah arah *flex* menjadi menurun ke bawah menggunakan flex-direction: column; (biasanya untuk tampilan HP), maka sumbunya bertukar!

Sekarang, justify-content akan mengatur Atas-Bawah, dan align-items akan mengatur Kiri-Kanan. Memahami pertukaran sumbu ini adalah kunci menguasai layout responsif menggunakan Flexbox tanpa harus menebak-nebak (trial and error).