Flex Direction

Arah penyusunan adalah keputusan pertama yang kita ambil setelah menyalakan flex container, dan flex-direction mengendalikannya dengan empat nilai: dua arah utama dan dua pembalikannya. Properti ini menentukan ke mana items mengalir, di sisi mana penyusunan dimulai, serta arah main axis yang memengaruhi justify-content dan flex-basis. Yang menarik, urutan DOM tidak pernah berubah — yang berubah hanyalah arah visualnya. Pada Chapter ini kita mencoba keempat nilai tersebut dan menimbang kapan pembalikan arah layak dipakai.

Empat Nilai flex-direction #

Nilai row dan column adalah pilihan sehari-hari; dua nilai -reverse membalik titik awal penyusunan. File CSS berikut dipakai oleh demo chapter ini — empat papan berisi items bernomor yang sama sehingga perbedaan arah langsung terlihat:

.arah-row            { display: flex; flex-direction: row; }
.arah-row-reverse    { display: flex; flex-direction: row-reverse; }
.arah-column         { display: flex; flex-direction: column; }
.arah-column-reverse { display: flex; flex-direction: column-reverse; }
.arah-row, .arah-row-reverse,
.arah-column, .arah-column-reverse {
  width: 360px;
  height: 240px;
  background: rgb(241, 245, 249);
}
.kotak {
  width: 90px;
  height: 48px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 48px;
}

Mari kita telaah aturan di atas:

1. Baris 2 (flex-direction: row;): main axis ke kanan; items 1, 2, 3 tampil berurutan dari tepi kiri.
2. Baris 3 (flex-direction: row-reverse;): main axis tetap horizontal tetapi titik mulainya di kanan; item 1 kini tampil di tepi kanan, diikuti 2 dan 3 ke arah kiri.
3. Baris 4 (flex-direction: column;): main axis ke bawah; items menumpuk dari atas ke bawah di dalam papan setinggi 240px, menyisakan ruang kosong di bawahnya.
4. Baris 5 (flex-direction: column-reverse;): titik mulai di tepi bawah; item 3 tampil paling atas dan item 1 paling bawah.
5. .kotak (width 90px): lebar eksplisit ini berada di cross axis ketika arahnya kolom, sehingga items tetap ramping — width menimpa perilaku stretch default.

Setiap papan pada demo berisi markup yang persis sama, sehingga perbedaannya murni berasal dari CSS:

<div class="arah-row-reverse">
  <div class="kotak">1</div>
  <div class="kotak">2</div>
  <div class="kotak">3</div>
</div>

Hasil di Browser:

Empat papan tampil bertumpuk dengan pola angka berbeda: row menyusun 1-2-3
ke kanan; row-reverse menyusun mulai dari tepi kanan sehingga item 1 di kanan;
column menumpuk 1-2-3 ke bawah; column-reverse menumpuk mulai dari tepi bawah
sehingga item 3 tampil paling atas.
Nilai computed yang diperiksa harness: flex-direction keempat papan =
row, row-reverse, column, column-reverse; item pada papan column tetap
selebar 90px karena width eksplisit menimpa stretch.

Membalik Tanpa Mengubah DOM #

Kedua nilai -reverse mengubah arah visual tanpa menyentuh markup. Kemampuan ini berguna untuk kasus seperti deretan aksi “Batal | Simpan” yang ingin ditampilkan dari kanan, atau deretan langkah yang dibaca mundur. Namun ada batas yang perlu diingat: urutan DOM tetap 1, 2, 3, dan itulah urutan yang dibaca screen reader serta urutan fokus keyboard.

Column dan Kebutuhan Tinggi #

Pada arah row, tinggi container umumnya tumbuh mengikuti isi sehingga kita jarang memikirkannya. Pada arah column, peran keduanya bertukar: lebar container yang biasanya tetap, sedangkan tinggi menyesuaikan isi. Bila kita ingin ada ruang kosong yang nantinya dibagi oleh justify-content, tetapkan tinggi container secara eksplisit — demo kita memakai 240px untuk alasan itu.

Perlu juga diingat bahwa column mengubah makna dimensi: width kini berada di cross axis dan height di main axis. Kebiasaan yang menolong adalah membaca dua sumbu terlebih dahulu (Chapter Main Axis dan Cross Axis ), baru menulis properti. Setelah arah tersusun, pertanyaan berikutnya adalah bagaimana ruang sisa di main axis digunakan — topik Chapter Justify Content .

.arah-row            { display: flex; flex-direction: row; }
.arah-row-reverse    { display: flex; flex-direction: row-reverse; }
.arah-column         { display: flex; flex-direction: column; }
.arah-column-reverse { display: flex; flex-direction: column-reverse; }
.arah-row, .arah-row-reverse,
.arah-column, .arah-column-reverse {
  width: 360px;
  height: 240px;
  background: rgb(241, 245, 249);
}
.kotak {
  width: 90px;
  height: 48px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 48px;
}