Properti Order dan Pengurutan Visual
Ubah urutan visual item flex tanpa mengubah DOM menggunakan properti order.
Properti Order dan Pengurutan Visual adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Properti order
Properti order mengubah urutan visual item flex dan grid tanpa mengubah struktur DOM. Nilai bawaannya adalah 0; nilai yang lebih tinggi muncul belakangan; nilai negatif muncul lebih awal.
Dasar-Dasar order
Item ditampilkan dari nilai order terendah hingga tertinggi. Item dengan nilai order yang sama ditampilkan sesuai urutannya dalam DOM.
<div class="nav">
<span class="nav-button">Button</span>
<span class="nav-logo">Logo</span>
<span class="nav-links">Links</span>
</div>
order Negatif
Gunakan nilai negatif untuk memindahkan item sebelum semua item bawaan (order:0):
<div class="list">
<div>Item 1</div>
<div class="sticky-first">Sticky</div>
<div>Item 2</div>
</div>
Mengubah Urutan secara Responsif
Ubah urutan visual pada breakpoint yang berbeda tanpa mengubah HTML:
<div class="layout">
<main class="main-content">Main</main>
<aside class="sidebar">Sidebar</aside>
</div>
Penting: Peringatan Aksesibilitas
order hanya mengubah urutan visual. Pembaca layar dan navigasi keyboard mengikuti urutan DOM, bukan urutan visual. Mengubah urutan secara visual sambil mempertahankan DOM dalam urutan baca yang logis sangat penting untuk aksesibilitas.
Ketidakkonsistenan Urutan Tab
Jika Anda mengubah urutan item secara visual dengan order, fokus Tab pada keyboard mengikuti urutan DOM yang mungkin berbeda dari urutan visual. Hal ini membuat navigasi membingungkan bagi pengguna keyboard. Gunakan pengubahan urutan visual hanya jika tidak mengganggu urutan logis.
Kasus Penggunaan Umum yang Tepat
Pengubahan urutan visual dapat diterima jika:
- Item bukan bagian dari urutan yang dapat dinavigasi (urutan dekoratif)
- Urutan visual sesuai dengan alur baca alami yang berbeda dari urutan sumber karena alasan pengorganisasian kode
Urutan Flexbox vs Grid
Properti order bekerja dengan cara yang sama pada Flexbox dan CSS Grid. Properti ini mengendalikan urutan dalam algoritme tata letak, bukan dalam DOM.
order dengan Flex-wrap
Saat item membungkus ke baris baru, order menentukan item mana yang muncul di setiap baris dan urutannya dalam baris tersebut.
Membalikkan Semua Item
Untuk membalikkan semua item, gunakan flex-direction: row-reverse atau column-reverse, bukan menetapkan nilai order negatif pada setiap item. Cara ini lebih semantik dan lebih sederhana.
<div class="reversed-list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Animasi dengan order
Perubahan pada order tidak dapat dianimasikan dalam CSS. Jika Anda memerlukan penataan ulang beranimasi, gunakan transformasi atau animasi yang digerakkan oleh JavaScript seperti Flip.js atau plugin Flip milik GSAP.
Pemeriksaan Singkat
Mengapa penggunaan properti order untuk menata ulang tautan navigasi harus dilakukan dengan hati-hati?
Ringkasan
order mengubah posisi visual item flex/grid tanpa menyentuh HTML. Nilai bawaannya adalah 0; nilai yang lebih rendah muncul lebih dahulu, sedangkan nilai yang lebih tinggi muncul terakhir. Gunakan ini untuk menata ulang secara responsif tanpa mengubah struktur DOM. Selalu pastikan bahwa navigasi papan ketik dan urutan pembaca layar tetap logis saat menggunakan penataan ulang dengan order.
Belajar CSS dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Properti Order dan Pengurutan Visual” gratis?
Ya — teks lengkap “Properti Order dan Pengurutan Visual” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Properti Order dan Pengurutan Visual”?
Ubah urutan visual item flex tanpa mengubah DOM menggunakan properti order. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Properti Order dan Pengurutan Visual” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Penggantian Perataan Item Flex dengan align-self
- Properti Order dan Pengurutan Visual
- Pola Shorthand Flex
- Tata Letak Flexbox Umum: Nav, Kartu, Objek Media