flex-direction dan wrap

Topik ini membahas dua properti yang menentukan struktur fisik kontainer flex, yaitu flex-direction untuk arah penyusunan dan flex-wrap untuk perpindahan item ke baris berikutnya. Keduanya menentukan bagaimana ruang kontainer terbagi menjadi baris flex serta bagaimana arah pembacaan memengaruhi kedudukan item. Setelah selesai membaca, baris kartu yang melipat dengan rapi ke baris kedua dapat dibangun tanpa menyentuh lebar item satu per satu.

Empat nilai flex-direction#

Properti flex-direction menetapkan arah sumbu main dan dengan demikian menentukan arah penyusunan seluruh item. Terdapat empat nilai yang masing-masing membalik atau memutar arah tersebut. Tabel berikut merangkum keempatnya beserta akibatnya pada susunan item.

Nilai row adalah default yang menjejerkan item dari kiri ke kanan pada dokumen berbahasa Indonesia. Nilai row-reverse membalik urutan visualnya tanpa mengubah urutan markah, sehingga item pertama menduduki sisi kanan. Nilai column menyusun item ke bawah, sedangkan column-reverse menyusunnya ke atas. Keempat nilai hanya mengubah arah, sedangkan isi dan urutan dokumen item tetap.

Perubahan arah juga memindahkan makna ukuran pada sumbu main. Pada column, ukuran awal item di sepanjang sumbu main mengacu pada tinggi, bukan lebar, sehingga pola yang ditulis untuk baris tidak serta-merta benar ketika dipindahkan ke kolom. Properti width dan height tetap bekerja pada sumbunya masing-masing, tetapi properti flex seperti flex-basis mengikuti sumbu main yang baru. Pemeriksaan arah menjadi langkah wajib sebelum menyalin pola antar kontainer.

Arah layout dan arah pembacaan#

Nilai row tidak berarti mendatar ke kanan secara mutlak, melainkan mengikuti arah pembacaan dokumen. Pada dokumen dengan dir="rtl" atau bahasa yang ditulis dari kanan ke kiri, row menjejerkan item dari kanan ke kiri, sedangkan row-reverse menjadi sebaliknya. Perilaku ini menjadikan layout yang ditulis dengan flex-direction tetap benar ketika digunakan pada bahasa dengan arah baca berbeda tanpa perlu ditulis ulang. Konsep ini disebut arah logis karena sumbu mengikuti logika teks, bukan arah layar yang tetap.

Akibatnya, deklarasi yang sama dapat menghasilkan kedudukan berbeda pada dokumen dengan arah pembacaan yang berbeda. justify-content: flex-end menempatkan item di ujung sumbu main, yang berarti sisi kiri pada row-reverse dan sisi kanan pada row dalam dokumen yang sama. Kebiasaan berpikir dalam istilah awal dan ujung sumbu, alih-alih kiri dan kanan, menjaga pola tetap benar ketika komponen digunakan ulang pada bahasa lain. Uji cepatnya mudah, yaitu mengganti nilai dir pada elemen html lalu memastikan susunan ikut menyesuaikan tanpa satu pun perubahan CSS.

flex-wrap dan baris flex#

Secara default kontainer flex memeras seluruh item ke dalam satu baris flex (flex line), yaitu perilaku yang berasal dari nilai default flex-wrap: nowrap. Apabila ruang tidak cukup, item tidak pindah baris, melainkan menyusut sesuai aturan penyusutan flex sampai semuanya muat. Perilaku ini tepat untuk navbar yang memang harus tetap satu baris, tetapi merusak kelompok kartu berukuran tetap karena setiap kartu ikut terhimpit.

Nilai flex-wrap: wrap mengizinkan baris baru ketika ruang sumbu main habis, sehingga item yang tidak muat berpindah ke baris berikutnya. Nilai wrap-reverse melakukan hal sama dengan menumpuk baris baru ke arah berlawanan, yaitu ke atas pada arah default. Jumlah baris ditentukan oleh lebar kontainer dan ukuran item, bukan oleh angka yang ditulis manual, sehingga susunan dihitung ulang setiap kali jendela berubah.

Pola nyata: baris kartu catatan#

Pola yang memanfaatkan wrap adalah baris kartu yang jumlah kolomnya menyesuaikan lebar kontainer, misalnya kartu catatan pada halaman utama aplikasi catatan. Setiap kartu diberi lebar yang nyaman dibaca, kontainer diberi flex-wrap: wrap, dan kartu yang tidak muat berpindah sendiri ke baris kedua. Tidak ada media query yang perlu ditulis karena penyusunan dihitung ulang oleh browser setiap kali ruang berubah.

<div class="baris-kartu">
  <article class="kartu">Belanja mingguan</article>
  <article class="kartu">Jadwal piket</article>
  <article class="kartu">Rencana belajar</article>
  <article class="kartu">Catatan rapat</article>
</div>

.baris-kartu {
  display: flex;
  flex-wrap: wrap;
}

.kartu {
  width: 180px;
  margin: 8px;
  padding: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

Ketika ruang tersisa tidak lagi cukup untuk kartu berikutnya, kartu itu berpindah ke baris kedua tanpa pengaturan tambahan. Tinggi setiap baris mengikuti kartu tertinggi pada barisnya, sedangkan kartu lain menyesuaikan diri karena align-items masih bernilai default stretch. Margin 8 piksel menjaga jarak antar kartu sekaligus jarak kartu ke tepi kontainer. Kekurangan pola ini baru terasa ketika jarak ke tepi kontainer harus berbeda dari jarak antar kartu, karena margin luar kartu ujung ikut dihitung dan padding kontainer harus disesuaikan secara manual. Untuk kelompok kartu yang jumlahnya berubah, perhitungan manual semacam itu menjadi beban pemeliharaan tersendiri.

Kesalahan umum#

Kesalahan pertama adalah membalik arah dengan row-reverse lalu mengharapkan urutan pembacaan ikut berbalik. Properti ini hanya membalik urutan visual, sedangkan urutan dokumen tetap, sehingga navigasi yang dibalik tetap dibacakan dan dinavigasi dengan urutan aslinya. Perubahan urutan yang bermakna sebaiknya dilakukan pada markah, bukan pada arah layout.

Kesalahan kedua adalah menulis flex-wrap pada item, bukan pada kontainer. Properti ini hanya bekerja pada kontainer flex karena baris flex adalah milik kontainer, sehingga deklarasi pada item tidak berpengaruh apa pun. Periksa selector yang menargetkan induk apabila item menolak melipat, dan pastikan induk itu benar-benar kontainer flex yang memiliki deklarasi display: flex.

Kesalahan ketiga adalah menggabungkan column dengan tinggi kontainer yang tidak dinyatakan. Kontainer kolom yang tingginya mengikuti isi tidak menyediakan ruang bagi properti perataan untuk bekerja, sehingga hasilnya tampak tidak berubah. Tinggi kontainer perlu dinyatakan, misalnya melalui height atau min-height, agar perataan pada sumbu main yang kini menurun memiliki ruang yang dapat dibagi.

Ringkasan#

• flex-direction menetapkan arah sumbu main melalui empat nilai, yaitu row, row-reverse, column, dan column-reverse.
• Nilai row mengikuti arah pembacaan dokumen sehingga layout yang sama tetap benar pada bahasa yang arah bacanya berbeda.
• Nilai default flex-wrap: nowrap memaksa satu baris dan menyusut item, sedangkan wrap mengizinkan baris baru ketika ruang habis.
• Baris kartu yang melipat dibangun dengan kontainer wrap dan kartu berlebar tetap tanpa media query.

Referensi#

• flex-direction — MDN — Dokumentasi lengkap empat nilai flex-direction beserta contoh dan dukungan browser.
• flex-wrap — MDN — Dokumentasi perilaku nowrap, wrap, dan wrap-reverse beserta contoh baris flex.
• CSS Flexible Box Layout Module Level 1 — CSS Working Group — Spesifikasi resmi yang mendefinisikan arah kontainer dan perulangan baris flex.