Main Axis dan Cross Axis

Setiap properti penjajaran flexbox bekerja pada salah satu dari dua sumbu, dan membedakan keduanya adalah kunci untuk membaca flexbox tanpa menghafal. justify-content menyusun items di sepanjang main axis, sedangkan align-items menyusun items melintang pada cross axis. Arah main axis sendiri ditentukan oleh flex-direction, yang secara default bernilai row. Pada Chapter ini kita memetakan kedua sumbu tersebut, lalu membuktikan arahnya dengan demo yang mengganti arah penyusunan dari baris menjadi kolom.

Dua Sumbu dalam Satu Container #

Main axis adalah arah utama tempat items berjajar; cross axis adalah arah tegak lurusnya. Ketika flex-direction bernilai row, main axis mengarah ke kanan dan cross axis ke bawah. Ketika nilainya column, keduanya bertukar peran: main axis ke bawah, cross axis ke kanan. Sumbu ini melekat pada container — arahnya berubah mengikuti deklarasi kita, bukan mengikuti orientasi layar.

Dengan peta di atas, pertanyaan “properti ini menggeser item ke mana?” selalu dapat dijawab dalam dua langkah: tentukan arah main axis dari flex-direction, lalu lihat propertinya bekerja di sumbu mana.

Membuktikan Arah dengan Demo #

File CSS berikut dipakai oleh demo chapter ini. Dua papan memakai nilai flex-direction berbeda, dan items keduanya sengaja diberi perlakuan berbeda:

.baris {
  display: flex;
  flex-direction: row;     /* main axis: horizontal */
  width: 300px;
  height: 100px;
  background: rgb(241, 245, 249);
}
.kolom {
  display: flex;
  flex-direction: column;  /* main axis: vertikal */
  width: 300px;
  background: rgb(241, 245, 249);
}
.item-baris {
  width: 80px;
  height: 48px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 48px;
}
.item-kolom {
  height: 48px;            /* tanpa width: melebar memenuhi cross axis */
  background: rgb(94, 234, 212);
  color: rgb(15, 118, 110);
  font-weight: 700;
  line-height: 48px;
  padding-left: 12px;
}

Mari kita telaah bagian-bagian pentingnya:

1. Baris 4 (flex-direction: row;): nilai default flexbox, dituliskan eksplisit di sini agar perbandingan dengan papan kedua terlihat jelas.
2. Baris 12 (flex-direction: column;): main axis papan kedua mengarah ke bawah, sehingga items tersusun vertikal.
3. .item-baris (width 80px, height 48px): pada papan pertama, lebar berada di main axis dan tinggi di cross axis; kedua dimensi dideklarasikan sehingga tidak ada yang berubah.
4. .item-kolom (hanya height 48px): pada papan kedua, tinggi berada di main axis. Cross axis kini horizontal, dan nilai default align-items (stretch) melebarkan setiap item hingga memenuhi lebar container 300px.

HTML pendampingnya menyiapkan tiga items untuk setiap papan:

<div class="baris">
  <div class="item-baris">1</div>
  <div class="item-baris">2</div>
  <div class="item-baris">3</div>
</div>
<div class="kolom">
  <div class="item-kolom">A</div>
  <div class="item-kolom">B</div>
  <div class="item-kolom">C</div>
</div>

Hasil di Browser:

Dua papan tampil bertumpuk: papan row menyusun tiga kotak biru ke kanan
(masing-masing 80px × 48px), papan column menumpuk tiga bilah hijau ke bawah.
Nilai computed yang diperiksa harness: flex-direction papan pertama = row,
papan kedua = column; item papan column melebar memenuhi cross axis
hingga 300px, dengan tinggi 48px sesuai deklarasi.

Properti dan Sumbunya #

Tabel berikut merangkum properti flexbox yang akan kita pelajari pada section ini, beserta sumbu kerjanya:

Pola penerapannya konsisten: properti yang mengandung -content atau -items ditulis di container, sedangkan -self dan -basis ditulis di item. Ketika nanti sebuah layout terasa menolak dijajarkan, periksa dua hal ini — sering kali propertinya benar tetapi ditulis di aktor yang keliru, atau sumbunya tidak seperti dugaan karena flex-direction yang berbeda.

Dengan dua sumbu ini di kepala, Chapter Flex Direction berikutnya menjadi ringkas: keempat nilainya hanyalah variasi arah main axis beserta pembalikannya.

.baris {
  display: flex;
  flex-direction: row;     /* main axis: horizontal */
  width: 300px;
  height: 100px;
  background: rgb(241, 245, 249);
}
.kolom {
  display: flex;
  flex-direction: column;  /* main axis: vertikal */
  width: 300px;
  background: rgb(241, 245, 249);
}
.item-baris {
  width: 80px;
  height: 48px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 48px;
}
.item-kolom {
  height: 48px;            /* tanpa width: melebar memenuhi cross axis */
  background: rgb(94, 234, 212);
  color: rgb(15, 118, 110);
  font-weight: 700;
  line-height: 48px;
  padding-left: 12px;
}