gap dan pengurutan

Dua perkakas penyempurna pada kontainer flex adalah jarak antar item dan urutan tampil. Topik ini membahas properti gap beserta bentuk row-gap dan column-gap-nya, perbedaannya dengan margin, serta properti order untuk mengubah urutan visual tanpa menyentuh markah. Materi ditutup dengan catatan aksesibilitas mengenai urutan pembacaan layar serta dua pola nyata, yaitu jadwal piket yang diurutkan ulang dan kisi kartu berjarak rapi.

Jarak antar item dengan gap#

Properti gap memberi jarak tetap antar flex item tanpa menyentuh item sama sekali. Bentuk lengkapnya menerima dua nilai, yaitu row-gap untuk jarak antar baris dan column-gap untuk jarak antar kolom, sedangkan satu nilai pada gap berlaku untuk keduanya. Pada kontainer flex dengan arah row, hal itu berarti jarak antar baris flex yang terbentuk dari flex-wrap serta jarak antar item di dalam barisnya. Nilai yang diterima berupa satuan panjang atau persen, dan properti ini juga berlaku pada grid sehingga kebiasaannya dapat dibawa antar model layout.

.kisi {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 12px;
}

Urutan dua nilai mengikuti aturan baris terlebih dahulu, sehingga deklarasi di atas berarti jarak antar baris 24 piksel dan jarak antar item di dalam baris 12 piksel. Deklarasi gap: 12px setara dengan menuliskan row-gap: 12px dan column-gap: 12px sekaligus. Jarak ini tidak terlibat penggabungan margin dan tidak menumpuk dengannya karena gap melekat pada kontainer, bukan pada item. Setiap celah dihitung satu kali persis di posisinya, sehingga hasilnya mudah diprediksi ketika jumlah item berubah.

Perbedaan gap dengan margin#

Margin menempel pada item, sehingga kartu terakhir pada baris tetap membawa margin luarnya dan menyisakan jarak kosong di tepi kontainer. Jarak antar item yang ditumpuk juga berlipat, misalnya margin kanan 8 piksel bertemu margin kiri 8 piksel pada konteks flex menjadi 16 piksel. gap menghindari keduanya karena hanya mengisi celah antar item, sehingga tepi kontainer tetap bersih dan setiap celah berukuran sama tepat satu kali. Itulah sebabnya penjarakan seragam pada kelompok yang jumlahnya berubah lebih mudah dicapai dengan gap.

Perbedaan itu menjadikan gap pilihan utama untuk penjarakan sistematis, sedangkan margin tetap berguna untuk jarak yang sengaja tidak seragam, misalnya satu elemen yang didorong menjauh dari kelompoknya. Pada kontainer yang melipat baris, gap bekerja konsisten di kedua arah tanpa perlu menghitung baris terakhir, sedangkan pola margin pada baris terakhir selalu menyisakan ruang yang harus dibersihkan dengan selector tambahan. Memilih salah satu secara sadar lebih baik daripada mencampur keduanya dengan angka yang sama, karena hasil penjarakannya berbeda di tepi dan di antara item.

Pengurutan visual dengan order#

Properti order dideklarasikan pada flex item dan mengubah urutan tampil tanpa mengubah markah. Nilai defaultnya 0, item dengan nilai lebih kecil tampil lebih dulu, dan item dengan nilai sama mempertahankan urutan dokumen. Nilai negatif mendorong item ke posisi paling depan, sehingga satu kartu dapat dinaikkan ke urutan pertama dengan order: -1 tanpa memindahkan satu baris HTML pun. Properti ini juga berlaku pada item grid dengan makna yang serupa, sehingga kebiasaannya dapat dibawa antar model layout.

.papan .penting {
  order: -1;
}

Penggunaan order yang sehat bersifat kecil dan terlokalisasi, misalnya memindahkan tombol utama ke depan pada layar sempit atau menaikkan satu jadwal yang berjalan hari ini. Contoh lain yang wajar adalah menu dengan satu tindakan utama yang dinaikkan menjadi butir pertama pada lebar tertentu. Susunan besar yang ditata seluruhnya dengan order membuat urutan kode tidak lagi mencerminkan urutan tampil, sehingga pemeliharaannya sulit. Apabila urutan memang bagian dari makna konten, urutkan markahnya secara langsung dan biarkan order menangani pengecualian penyajian saja.

Catatan aksesibilitas#

order hanya mengubah urutan visual, sedangkan urutan dokumen yang dibacakan pembaca layar (screen reader) tetap mengikuti markah. Fokus keyboard juga mengikuti urutan dokumen, sehingga penekanan tombol Tab pada navigasi yang diurutkan ulang berpindah dengan pola yang berbeda dari indikasi visualnya. Ketidaksesuaian ini membingungkan pengguna yang mengandalkan keyboard atau pembaca layar karena urutan yang terlihat dan urutan fokusnya bergerak ke arah yang tidak sama.

Pemisahan peran yang sehat adalah menjadikan urutan dokumen sebagai urutan logis dan order sebagai koreksi penyajian yang kecil. Contoh yang aman adalah menggeser satu elemen dekoratif atau memindahkan satu kartu pada layar tertentu. Apabila kebutuhannya besar, ubah urutan markahnya karena aksesibilitas lebih murah dirawat dari sumbernya. Pemeriksaan cepatnya sederhana, yaitu menekan tombol Tab sambil membandingkan urutan fokus dengan urutan yang terlihat di layar.

Pola nyata: jadwal piket dan kisi kartu#

Dua pola penutup menggabungkan kedua perkakas tersebut. Jadwal piket kelas sering perlu diurutkan ulang tanpa menyentuh data, misalnya menampilkan petugas yang bertugas hari ini pada posisi pertama melalui order: -1 pada butirnya. Kisi kartu catatan memanfaatkan flex-wrap dan gap agar jarak antar kartu tetap rapi pada baris pertama, baris kedua, maupun persilangan keduanya.

<ul class="piket">
  <li>Budi</li>
  <li class="hari-ini">Ali</li>
  <li>Citra</li>
  <li>Dewi</li>
</ul>

.piket {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.piket li {
  padding: 6px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.piket .hari-ini {
  order: -1;
  background-color: #dbeafe;
  border-color: #0b5394;
}

Butir Ali bergeser ke depan melewati Budi meskipun markahnya tetap pada posisi kedua, sehingga perubahan hanya terjadi pada penyajian. Warna latar dan warna tepi yang berbeda pada butir hari ini murni penguat visual, sedangkan kedudukannya sepenuhnya milik order. Jarak 8 piksel antar butir tetap seragam ketika daftar melipat ke baris kedua karena gap mengisi setiap celah baru secara otomatis. Kisi kartu yang lebih besar mengikuti pola identik, yaitu kartu berlebar tetap, kontainer wrap, dan gap yang menjarakkan tanpa menyentuh kartu mana pun. Deklarasi order dan gap bekerja tanpa pengukuran manual, dan pola yang sama langsung dapat dipindahkan ke daftar tugas yang urutannya berubah setiap hari.

Kesalahan umum#

Kesalahan pertama adalah mengharapkan gap memberi jarak antara item dan tepi kontainer. gap hanya mengisi celah antar item, sehingga jarak ke tepi tetap menjadi tugas padding kontainer. Gabungan yang umum adalah padding kontainer seukuran gap-nya agar jarak di tepi dan di antara item terasa sama.

Kesalahan kedua adalah mencampur margin luar dan gap dengan angka yang sama, sehingga jarak antar item menjadi lebih lebar daripada jarak di tepi. Pilih satu sumber jarak per arah, biasanya gap, lalu gunakan margin hanya untuk pengecualian yang sengaja dirancang. Jarak yang berbeda per arah sengaja diatur melalui bentuk dua nilai pada gap, bukan melalui margin tambahan.

Kesalahan ketiga adalah menyusun ulang seluruh halaman dengan order, sehingga urutan visual tidak lagi terbaca dari markah. Nilai order yang tersebar di banyak item menyulitkan pemeliharaan dan menimbulkan ketidaksesuaian dengan urutan fokus keyboard. Koreksi kecil pada satu atau dua item masih dapat dipertanggungjawabkan, sedangkan penataan besar sebaiknya diselesaikan pada markahnya.

Ringkasan#

• gap memberi jarak antar item dan antar baris flex melalui row-gap, column-gap, serta shorthand satu nilai.
• gap tidak menyisakan jarak di tepi kontainer dan tidak berlipat seperti margin, sehingga penjarakannya lebih mudah diprediksi.
• order mengubah urutan visual dengan default 0 dan nilai lebih kecil tampil lebih dulu, tanpa mengubah markah.
• order tidak mengubah urutan pembacaan layar maupun fokus keyboard, sehingga hanya cocok untuk koreksi penyajian yang kecil.

Referensi#

• gap — MDN — Dokumentasi properti gap pada flex dan grid beserta aturan urutan nilainya.
• order — MDN — Dokumentasi pengurutan visual flex item beserta catatan aksesibilitasnya.
• CSS Flexible Box Layout Module Level 1 — CSS Working Group — Spesifikasi resmi yang mendefinisikan gap pada konteks flex dan urutan item.