Flex Direction

Pada chapter sumbu kita melihat bahwa main axis mengikuti flex-direction. Kini saatnya mengendalikan property tersebut secara langsung: satu deklarasi yang memutar seluruh arah penyusunan container. Empat nilainya terasa sepele, tetapi dampaknya besar — flex-direction ikut menentukan makna justify-content, align-items, dan perilaku wrap, sehingga menjadi keputusan pertama yang kita ambil setiap kali membangun layout flex baru.

Empat Nilai flex-direction #

row-reverse dan column-reverse tidak membalik isi dari tiap item — nomor 1 tetap nomor 1; yang berputar hanyalah urutan penyusunannya. Perhatikan pula bahwa nilai awalnya adalah row: container flex tanpa deklarasi arah otomatis menyusun mendatar.

Kapan nilai reverse dipakai secara sengaja? column-reverse populer pada log obrolan: item terbaru yang ditulis paling akhir di markup justru tampil paling bawah tanpa JavaScript, karena penyusunan dimulai dari bawah. row-reverse berguna untuk variasi desain seperti baris ikon yang menghadap kiri. Sisanya, tahan godaan memakai nilai reverse sebagai “tombol pindah posisi” — penataan posisi memang tugas perataan, bukan tugas arah.

Demo berikut menampilkan keempat nilai pada kelompok kotak bernomor yang sama persis — perhatikan kelompok column-reverse: nomor 3 berada paling atas karena urutan penyusunan dimulai dari bawah:

.panggung-arah {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

gap ikut mengikuti arah baru tanpa perubahan apa pun pada nilainya.

row Mengikuti Arah Menulis #

Nilai row tidak berarti “kiri ke kanan” secara mutlak — ia mengikuti arah tulis (writing direction) dokumen. Pada halaman bahasa Indonesia atau Inggris yang LTR (left-to-right), hasilnya mendatar dari kiri. Pada dokumen yang RTL (right-to-left) seperti bahasa Arab, row otomatis menyusun dari kanan:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <body>
    <!-- seluruh isi halaman kini tersusun kanan ke kiri -->
  </body>
</html>

Inilah alasan kita tidak boleh “memperbaiki” layout RTL dengan menukar nilai menjadi row-reverse. Property ini dirancang mengikuti arah tulis, jadi biarkan atribut dir yang bekerja; layout yang mengandalkan row-reverse untuk masalah semacam ini justru pecah ketika arah dokumen berbeda. Prinsip yang sama mendasari logical properties yang dibahas pada section lanjutan.

Kapan column Adalah Pilihan Tepat #

Dua keputusan arah meng-cover hampir semua kebutuhan: row untuk barisan mendatar (navigasi, baris kartu, deret tombol) dan column untuk susunan vertikal. column paling berguna pada pola berikut:

• Menu vertikal pada sidebar atau drawer.
• Form bertumpuk: pasangan label dan input disusun dari atas ke bawah.
• Komponen kecil seperti kartu profil: gambar, nama, lalu bio di bawahnya.

.form-daftar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 360px;
}

Demo berikut merakit pola form bertumpuk itu tanpa satu pun margin manual:

Mari kita telaah:

1. display: flex: mengaktifkan konteks flex pada pembungkus form.
2. flex-direction: column: memutar main axis ke vertikal, sehingga tiap anak tersusun di bawah anak sebelumnya.
3. gap: 14px: jarak antar baris form; pada arah column, jarak ini datang dari row-gap — mekanismenya kita bedah pada chapter Gap pada Flexbox.
4. max-width: 360px: membatasi lebar form agar input tidak melar terlalu panjang di layar lebar.

Satu catatan mekanis: pada column, besaran utama item kini vertikal, sehingga container yang tingginya mengikuti isi tidak punya ruang sisa untuk didistribusikan. Bila kita ingin justify-content bereaksi pada arah column — misalnya menggeser daftar menu ke tengah tinggi sidebar — container perlu tinggi eksplisit, misalnya lewat min-height.

Kesalahan Umum #

Ringkasan #

flex-direction memilih salah satu dari empat arah penyusunan: row, row-reverse, column, atau column-reverse, dengan row sebagai nilai default yang mengikuti arah tulis dokumen. Arah ini menentukan makna seluruh properti perataan lain, jadi putuskan lebih dulu sebelum mengatur sisanya. Setelah arah lurus, pertanyaan berikutnya: bagaimana bila item tidak muat dalam satu baris — di situlah flex-wrap masuk.