Panduan komprehensif untuk Flexbox memesan & penataan kembali

() translation by (you can also view the original English article)

Flexbox tata letak modul memungkinkan kita untuk mengeluarkan flex item dalam urutan dan arah. Flexbox memesan adalah, pada kenyataannya, lebih mudah daripada memesan dengan mengapung atau CSS grid, bahkan jika Anda mungkin tidak berpikir begitu pada awalnya. Sebagai flexbox adalah model tata letak dimensi, dibandingkan dengan CSS grid yang dua dimensi, Anda hanya perlu membayar perhatian ke satu arah. Aturan juga jelas didefinisikan oleh W3C, sehingga Anda tidak perlu berurusan dengan kekacauan biasa mengapung dan clearfixes.

Dengan membaca panduan ini, Anda akan belajar bagaimana menggunakan properti flexbox berikut untuk tujuan:

Flex-direction
Flex-wrap
Flex-flow
order

Ordering vs Reordeing

Ketika berbicara tentang mengurutkan flexbox, kita perlu membuat jelas perbedaan antara ordering dan reordering.

Apa yang dimaksud dengan Ordering?

Ketika kita membuat sebuah layout flexbox kita perlu terlebih dulu menentukan urutan awal, artinya kita harus memutuskan bagaimana sumbu wadah flex diposisikan. Saya menulis secara detail tentang bagaimana flexbox sumbu bekerja dalam panduan saya tentang flexbox alignment.

Secara singkat, setiap wadah flex memiliki dua sumbu: sumbu utama dan sumbu pemotong. Sumbu utama akan memiliki salah satu dari empat arah, dan sumbu pemotong akan selalu tegak lurus yang:

kiri ke kanan
kanan ke kiri
atas ke bawah
bawah ke atas

The cross axis is always perpendicular to the main axis — Sumbu pemotong selalu tegak lurus dengan sumbu utama.

Kami mengatur sumbu utama dengan properti flex-arah, maka kami memutuskan bagaimana flex item akan membungkus, menggunakan flex-wrap properti. Ini dua sifat menentukan bagaimana browser akan mengeluarkan item dalam wadah flex.

Jadi apa itu Reordering?

Flexbox juga memungkinkan kita memanipulasi urutan sumber default, Reordering secara efektif, dengan bantuan dari properti order. Reordering berarti bahwa kita mengubah render visual item, sementara sumber urutan tetap utuh.

Jika kita menggunakan kemampuan penataan flexbox, kita tidak perlu mengubah struktur dokumen HTML hanya demi presentasi visual. Jadi, pengguna pembaca layar (dan mesin pencari) bisa mendapatkan konten dalam cara yang logis terstruktur (misalnya sidebar tidak akan diutamakan daripada konten utama).

Flexbox Ordering

Flexbox ordering terjadi dengan properti flex-direction dan flex-wrap. Flex-direction menentukan arah sumbu utama. Ini dapat mengambil nilai berikut:

row sumbu utama (default): kiri ke kanan
row-reverse sumbu utama: kanan ke kiri
column sumbu utama: atas ke bawah
column-reverse sumbu utama: bawah ke atas

Flex-wrap mendefinisikan jika item flex diatur dalam satu baris atau dibungkus ke beberapa baris. Ini juga mengontrol arah sumbu pemotong. Dapat memiliki tiga nilai:

nowrap (default) menampilkan flex item dalam satu baris; sumbu silang berdiri dalam posisi default
wrap menampilkan flex item dalam beberapa baris; sumbu silang berdiri dalam posisi default
wrap-reverse menampilkan flex item dalam beberapa baris; sumbu silang terbalik

posisi default sumbu silang adalah:

atas ke bawah dalam casus row dan row-reverse
kiri ke kanan dalam kasus column dan column-reverse

Dalam artikel saya sebelumnya tentang flexbox alignment, Kalian dapat menemukan 4 contoh secara detail (dengan demo) tentang cara mengatur sumbu utama dalam empat arah yang berbeda menggunakan flex-direction. Namun, ketika membahas flexbox ordering, saya pikir lebih penting untuk mengetahui bagaimana menggunakan properti flex-direction dan flex-wrap bersama-sama untuk mencapai urutan sumber yang kita cari.

Contoh kode cepat

Kita akan menggunakan sebuah contoh kode sederhana untuk melihat bagaimana cara kerja flexbox ordering. HTML di sini hanya terdiri dari beberapa tag divs:

<div class="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
</div>

.container div akan menjadi wadah flex dan divs dengan kelas .item akan menjadi item flex. Kita akan menggunakan (hampir) CSS yang sama di semua contoh, hanya properti flex-direction dan flex-wrap akan berubah. Berikut adalah tampilan CSS kami dengan nilai-nilai row dan wrap:

html {
  background: #fff7f6;
}
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.item {
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  padding: 3rem;
  background: mistyrose;
  border: 3px solid tomato;
  color: tomato;
  margin: 6px;
}

Berikut adalah contoh yang sama dalam demo CodePen:

Ordering dengan `Row` dan `Column`

Sekarang, kita telah mencapai bagian yang benar-benar menarik! Hal ini tidak terlalu sulit untuk mengerti flexbox yang ordering secara teori, tetapi menggunakannya dalam praktek pasti bisa menjadi suatu tantangan. Hal ini terjadi karena sulit untuk mengetahui bagaimana perbedaan variasi dari flex-direction dan flex-wrap dibandingkan satu sama lain.

Dalam pena tertanam di bawah ini, Anda dapat melihat bagaimana flex-arah: baris dan flex-arah: kolom layout bekerja sama dengan nilai yang berbeda dari flex-wrap properti. Gunakan bentuk kontrol untuk melihat kombinasi yang berbeda.

Seperti yang Anda lihat, ketika flex-direction adalah row, flex item diletakkan horizontal, dari kiri ke kanan. Bila kita menggunakan wrap-reverse bukan wrap, flexbox mulai meletakkan item-item dari bawah, bukan dari atas. Hal ini terjadi karena wrap-reverse membalik arah sumbu silang.

Ketika flex-direction menggunakan column, item yang diletakkan secara vertikal, dari atas ke bawah. Dan, ketika kita menggunakan wrap-reverse bukan wrap, flexbox mulai meletakkan barang-barang dari kanan (sekarang ini adalah titik awal dari sumbu silang), bukan dari kiri.

Ordering dengan `row-reverse` dan `column-reverse`

Sekarang, mari kita lihat bagaimana flexbox menampilkan item ketika flex-direction menggunakan row-reverse dan column-reverse.

Seperti yang Kalian lihat dalam demo di atas, flexbox mulai meletakkan item dari awal sumbu utama dalam kedua kasus, sama seperti sebelumnya. Sumbu utama tata letak row-reverse berjalan dari kanan ke kiri, sehingga flexbox mulai meletakkan item-item dari kanan. Dan, tata letak sumbu utama column-reverse berjalan dari bawah ke atas, jadi item mulai mengalir dari bawah wadah flex.

Apabila kita menggunakan flex-wrap: wrap, flexbox mulai membungkus item-item dari atas ketika flex-direction menggunakan row-reverse dan dari kiri ketiak menggunakan column-reverse, karena ini adalah titik awal sumbu silang dalam kasus masing-masing.

ketika kita membalik arah pembungkus menjadi flex-wrap: wrap-reverse, sumbu silang akan berjalan dalam arah yang berlawanan. Itu akan mengarah dari bawah ke atas ketika flex-direction menggunakan row-reverse, dan dari kanan ke kiri ketika column-reverse.

Mempercepat hal-hal Up dengan singkatan `flex-flow`

CSS juga memiliki singkatan keren untuk properti flex-direction dan flex-wrap. Ini disebut flex-flow. Untuk menggunakannya, kita perlu memasukkan dua properti setelah satu sama lain dengan cara sebagai berikut:

.container-1 {
    flex-flow: row wrap;
}
.container-2 {
    flex-flow: column-reverse wrap-reverse;
}

Flexbox Reordering

Sudah waktunya untuk melihat hal-hal yang sedikit berbeda.

Properti order perubahan default memesan barang flex kita mendefinisikan dengan flex-direction dan flex-flow. Ini hanya mempengaruhi render visual item, sehingga tidak mempengaruhi cara bagaimana pembaca layar dan agen pengguna non-CSS lain membaca source code.

Bertentangan dengan sifat-sifat yang disebutkan sebelumnya, kita menggunakan perintah pada item flex, bukan wadah flex. Ini dapat mengambil nilai integer apapun, dan nilai default yang adalah 0.

Contoh berikut bergerak .item-3 ke titik awal dari sumbu utama. Semuanya memiliki 0 sebagai nilai default, itu sudah cukup untuk menggunakan order: -1 aturan untuk membuat item pertama dalam wadah:

1	.item-3 {
2	order: -1;
3	}

Anda akan melihat bahwa kita dapat menggunakan logika yang sama untuk memindahkan .item-3 ke akhir sumbu utama. Kita hanya perlu menentukan nilai positif pesanan untuk itu.

Tentu saja, kita dapat menyusun seperti banyak dari ini flex item yang kita inginkan (meskipun perlu diingat bahwa penataan kembali segala sesuatu mungkin bukan paling ramah aksesibilitas keputusan pernah). Sifat urutan item flex berbeda yang selalu relatif terhadap satu sama lain. Di bawah ini, Anda dapat melihat bagaimana menyusun ulang beberapa item dalam wadah flex.

.item-3 {
  order: -1;
}
.item-4 {
  order: -2;
}
.item-5 {
  order: 2;
}
.item-7 {
  order: 1;
}

Pengurutan dan aksesibilitas

Hal yang paling penting untuk dipahami tentang semua ini adalah properti order agar tidak mempengaruhi ururtan lukisan, pidato, dan navigasi. Ini berarti bahwa ketika kita mengubah urutan item flex kita, pengguna media non-visual tidak akan mengalami perubahan. Sebagai contoh, orang-orang yang mengandalkan navigasi keyboard akan masih bergerak melalui link dalam urutan asli.

Perilaku flexbox ini dapat berguna dalam beberapa kasus. Sebagai contoh, dimungkinkan untuk membuat apa yang disebut "Holy Grail Layout" dapat diakses dengan bantuan flexbox ordering. Holy Grail Layouts adalah layout blog populer dengan header, footer, dua sidebars: satu di sebelah kiri dan satu di sebelah kanan konten utama.

Dalam layout ini, kita biasanya menempatkan sidebar kiri sebelum konten utama dalam kode HTML. Namun, dari sudut pandang aksesibilitas, pengguna teknologi bantu harus menghadapi konten utama pertama. Flexbox sempurna untuk ini. Kita dapat menempatkan konten utama sebelum sidebars dua di markup kita. Kemudian, kita hanya perlu meletakkan sidebar dan konten utama ke posisi yang tepat menggunakan properti order:

.sidebar-left { 
  order: 1;
}
article {
  order: 2;
}
.sidebar-right {
  order: 3;
}

Flexbox & menulis mode

Segala yang dikatakan dalam tutorial ini berlaku untuk modus menulis LTR (kiri ke kanan). Sumbu Flexbox benar-benar mengikuti arah menulis dokumen, yang dapat diatur dengan sifat arah dan menulis-mode. Inilah mengapa dalam modus menulis LTR, sumbu utama berjalan dari kiri ke kanan ketika flex-direction menggunaka row. Dalam modus RTL menulis itu berjalan dalam arah yang berlawanan, dari kanan ke kiri, dan segala sesuatu menyesuaikan.

Itu adalah sebuah bungkus (Flex)!

Tutorial ini adalah bagian kedua dari seri flexbox. Pastikan Anda membaca bagian pertama tentang kesejajaran flexbox, untuk belajar bagaimana untuk menyelaraskan flex item sepanjang utama dan lintas kapak. Jika Anda ingin tahu lebih banyak tentang flexbox ordering, MDN memiliki sangat informatif artikel pada subjek juga.