Main Axis dan Cross Axis

Dari semua konsep Flexbox, satu model pikir memberi dampak terbesar pada kecepatan belajar kita: dua sumbu. Setiap properti perataan — justify-content, align-items, align-content, align-self — selalu beroperasi pada salah satu sumbu tersebut. Bukan kebetulan nama justify dan align dipetakan begitu; begitu peta ini melekat, chapter-chapter selanjutnya terasa seperti menebak yang benar alih-alih menghafal.

Dua Sumbu di Dalam Setiap Flex Container #

Main axis (sumbu utama) adalah arah penyusunan item. Arahnya ditentukan flex-direction, dan nilai defaultnya row — mendatar, dari kiri ke kanan.
Cross axis (sumbu silang) adalah arah yang tegak lurus main axis. Pada default tadi, cross axis berjalan vertikal dari atas ke bawah.

Hubungan keduanya dengan flex-direction ringkas seperti ini:

`flex-direction`	Main axis	Cross axis
`row` (default)	Mendatar (kiri → kanan)	Vertikal (atas → bawah)
`column`	Vertikal (atas → bawah)	Mendatar (kiri → kanan)

Nilai row-reverse dan column-reverse membalik arah main axis tanpa mengubah pemisahan peran kedua sumbu.

justify-content dan align-items: Pasangan yang Saling Melengkapi #

Dua properti perataan paling sering dipakai masing-masing “berlangganan” satu sumbu:

justify-content mendistribusikan item di sepanjang main axis.
align-items meratakan item di sepanjang cross axis.

css
.baris-laporan {
  display: flex;
  justify-content: space-between; /* sepanjang main axis: mendatar */
  align-items: center;            /* sepanjang cross axis: vertikal */
  min-height: 96px;
  gap: 12px;
}

Dua deklarasi menyelesaikan dua dimensi sekaligus. Demo berikut menjalankan keduanya bersamaan pada tiga kartu berbeda tingginya:

Mari kita telaah:

display: flex: mengaktifkan konteks flex; secara default main axis-nya mendatar.
justify-content: space-between: sisa ruang horizontal dibagikan di antara item — item pertama menempel kiri, item terakhir menempel kanan.
align-items: center: tiap item diposisikan di tengah garis vertikal barisnya, bukan diregangkan (perilaku default stretch yang akan kita bedah pada chapter Align Items).
min-height: 96px: memberi tinggi kerja pada baris agar efek centering vertikal terlihat.

Sumbu Ikut Berputar Saat Arah Berubah #

Bagian ini yang paling sering membuat orang heran: kedua sumbu tidak terikat layar, melainkan terikat arah. Begitu kita menulis flex-direction: column, main axis berpindah ke vertikal dan cross axis ke mendatar. Konsekuensinya:

justify-content yang tadinya menggeser item ke kiri-kanan kini menggesernya ke atas-bawah.
align-items yang tadinya meratakan secara vertikal kini meratakan secara horizontal.

justify-content tidak pernah berpindah tugas — ia selalu bekerja di main axis; hanya saja main axis-nya yang pindah tempat. Karena itu ketika sebuah layout terasa “terbalik” setelah arah diubah, jangan mengganti property-nya; cukup sadari bahwa sumbunya yang berputar. Tabel pada bagian pertama adalah acuan cepat untuk situasi ini.

Demo berikut membandingkan kedua arah pada markup dan ukuran kotak yang identik:

Contoh konkret yang menumpulkan keheranan ini: sidebar menu memakai flex-direction: column. Untuk mendorong daftar menu ke tengah tinggi sidebar, yang dibutuhkan adalah justify-content: center — meski rasa kita menuntut “perataan vertikal” yang identik dengan align-items. Main axis pada container itu memang vertikal, sehingga urusan vertikal adalah urusan justify-content.

Pertanyaan Dua Arah Sebelum Menulis Property #

Sebelum menulis properti perataan apa pun, ajukan satu pertanyaan: pergeseran yang saya inginkan searah penyusunan item, atau tegak lurusnya? Searah penyusunan berarti main axis dan jawabannya justify-content; tegak lurus berarti cross axis dan jawabannya align-items. Heuristik singkat ini tetap valid di semua arah, semua nilai flex-direction, dan semua kombinasi wrap — satu-satunya yang perlu diperbarui hanyalah gambaran sumbu di kepala kita setiap kali arah berubah.

Kesalahan Umum #

Gejala	Penyebab	Perbaikan
`justify-content: center` tidak menengahkan secara vertikal	Container masih `row`; center terjadi di sumbu mendatar	Pakai `align-items: center` untuk vertikal
`align-items: center` tidak menggeser item ke tengah horizontal	Cross axis pada `row` berjalan vertikal	Pakai `justify-content: center`
Properti terasa “salah tempat” setelah ganti ke `column`	Main axis pindah ke vertikal	Cek ulang tabel sumbu; property tidak perlu diganti

Ringkasan #

Setiap flex container memiliki main axis — arah penyusunan item yang mengikuti flex-direction — dan cross axis yang tegak lurusnya. justify-content selalu bekerja di main axis dan align-items selalu di cross axis, tetapi posisi kedua sumbu berputar begitu arah berubah dari row ke column. Karena sumbu ditentukan oleh arah penyusunan, chapter berikutnya membahas flex-direction beserta keempat nilainya secara tuntas.