FLEX ORDER

Properti CSS order digunakan dalam layout Flexbox untuk mengubah urutan visual elemen flex. Ini sangat berguna ketika kamu ingin menampilkan elemen dalam urutan yang berbeda dari urutan source mereka dalam markup HTML.

Penggunaan Properti Order

Secara default, elemen flex ditampilkan dalam urutan yang sama saat mereka muncul di dokumen sumber. Mereka diurutkan dari awal hingga akhir, dari atas ke bawah (dalam flex direction column) atau dari kiri ke kanan (dalam flex direction row).

Namun, dengan menggunakan properti CSS order, kamu dapat mengubah urutan visual ini tanpa harus mengubah urutan elemen dalam markup HTML.

Sintaksnya adalah:

.item {
  order: 3;
}

Nilai default dari properti order adalah 0. Nilai negatif diperbolehkan, yang berarti elemen akan ditempatkan sebelum item yang order-nya 0.

Contoh: Menggunakan Order

Berikut adalah contoh sederhana yang menunjukkan bagaimana menggunakan properti order dalam Flexbox.

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;
}

.flex-item:nth-child(1) {
  order: 2;
}

.flex-item:nth-child(2) {
  order: 3;
}

.flex-item:nth-child(3) {
  order: 1;
}

Dalam contoh di atas, meskipun elemen pertama adalah yang pertama dalam markup, ia akan muncul kedua dalam layout visual karena order propertinya diatur ke 2. Demikian pula, elemen kedua akan muncul terakhir (karena order-nya 3), dan elemen ketiga akan muncul pertama (karena order-nya 1).

Catatan Penting tentang Properti Order

Menggunakan properti order bisa sangat berguna, tetapi harus digunakan dengan hati-hati. Mengubah urutan visual dari elemen dapat membuat interface sulit dipahami, terutama untuk pengguna keyboard dan pengguna teknologi asistif lainnya.

Oleh karena itu, selalu pastikan bahwa urutan visual elemen masih logis dan mudah dipahami. Juga pastikan urutan tab masih konsisten dengan urutan visual, untuk membantu pengguna yang memilih untuk menerapkan navigasi keyboard.