Panduan Lengkap untuk Flexbox Alignment

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

Alignment mungkin merupakan aspek flexbox yang paling membingungkan. Modul flexbox layout memiliki beberapa properti alignment yang dapat digunakan untuk situasi yang berbeda, dan ketika Anda menggunakannya mungkin tidak memahami apa kegunaannya. Namun, jika Anda tahu apa yang harus diperhatikan, alignment bukanlah hal yang rumit seperti saat Anda pertama kali mencobanya. Tutorial ini akan membantu Anda memahami aligment pada flexbox dengan sempurna.

Kisah tentang Dua Sumbu

Flexbox akan menggunakan dua sumbu: main axis dan cross axis. Seperti namanya, kedua sumbu ini memiliki hubungan hirarkis, yaitu main axis lebih unggul daripada cross axis.

The cross axis is always perpendicular to the main axis — Cross axis selalu tegak lurus dengan main axis.

Hubungan hirarkis ini merupakan perbedaan utama antara flexbox dan CSS Grid Layout. Secara desain, CSS Grid memiliki dua sumbu non-hirarkis: sumbu baris dan kolom. Pencipta standar web bermaksud menggunakan CSS Grid sebagai model layout dua dimensi. Disisi lain, flexbox, memiliki satu sumbu primer dan satu sumbu sekunder, karena tujuannya adalah untuk menjadi model layout satu dimensi. Hal keren tentang flexbox adalah Anda dapat menentukan arah dari satu dimensi dengan mengatur letak main axis, sehingga Anda dapat membuat layout baris dan kolom sekaligus.

Supaya tidak bingung dengan properti pada alignment, perlu diingat bahwa ketika Anda menggunakan flexbox, Anda akan menggunakan model satu dimensi. Meskipun jika layout Anda terlihat seperti dua dimensi (yaitu baris dan kolom), item 'flex' hanya dapat digunakan dalam satu arah, yaitu di main axis. Anda dapat mengatur flex dalam satu arah dan menyelaraskan jarak antar item sepanjang cross axis.

Mulailah dengan Menentukan Main Axis

Arah dari main axis ditentukan oleh properti flex-direction - ada empat value yang dapat digunakan:

flex-direction: row; – arah main axis dari kiri ke kanan (pengaturan default)
flex-direction: row-reverse; – arah main axis dari kanan ke kiri
flex-direction: column; – arah main axis dari atas ke bawah
flex-direction: column-reverse; – arah main axis dari bawah ke atas

Mari kita lihat bagaimana tampilan layout ini di browser. Saya akan menggunakan contoh HTML sederhana, hanya sembilan kotak yang ditumpuk satu sama lain:

<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>

Div paling luar dengan class .container akan menjadi pembungkus flex dan div dibagian dalam dengan class .item akan menjadi item flex.

1. Dari Kiri ke Kanan: row

Seperti yang dibahas sebelumnya, arah default dari flex adalah row; jika Anda tidak set value apa pun, maka value ini yang akan digunakan. Pada contoh di bawah ini, saya menambahkan beberapa properti flexbox ke dalam class container. Beberapa properti flex diberikan untuk tujuan dekoratif:

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

Ketika properti flex-direction diisi row, main axis akan mangarah secara horizontal, dari kiri ke kanan. Hal ini merupakan arah dimana flex akan diletakkan. Cross axis akan mengarah secara tegak lurus, dari atas ke bawah, dan akan mengikuti arah dari item pembungkusnya.

2. Dari Kanan ke Kiri: row-reverse

Ketika flex-direction berisi value row-reverse, posisi sumbu tetap sama, artinya main axis akan mengarah secara horizontal, dan cross axis secara vertikal. Namun, arah baris akan terbalik: dari kanan ke kiri sepanjang main axis.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

Jika Anda perhatikan contoh di bawah ini, penomoran pada baris dimulai dari kanan ke kiri, tetapi item masih terbungkus secara vertikal ke bawah.

Jika Anda juga ingin membalik arah cross axis, Anda perlu menggunakan wrap-reverse pada properti flex-wrap. Berikut perbedaannya:

3. Dari Atas ke Bawah: column

Ketika flex-direction diatur menjadi column, main dan cross axis akan bertukar posisi. Main axis akan mengarah secara vertikal (dari atas ke bawah) dan cross axis akan mengarah secara horizontal (dari kiri ke kanan).

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 35rem; /* so that items wrap */
}

Jika Anda perhatikan contoh di bawah ini, penomoran tidak diurutkan berdasarkan baris, tetapi berdasarkan kolom. Disinilah sifat satu dimensi dari flexbox terlihat dengan jelas. Item akan dibungkus hanya jika container diberi height dengan ukuran tetap.

4. Dari Bawah ke Atas: column-reverse

Saya harap Anda melihat perbedaan dalam contoh yang ada di tutorial ini. Ketika flex-direction diatur menjadi column-reverse, arah main axis tetap vertikal dan arah cross axis tetap horizontal, seperti yang kita lihat pada contoh sebelumnya. Namun, arah kolom dibalik sehingga arah main axis menjadi dari bawah ke atas.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  max-height: 35rem; /* so that items wrap */
}

Seperti yang Anda lihat di bawah ini, penomoran item flex dimulai dari kiri bawah, lalu ke atas dan ke kanan.

Sekali lagi, untuk mengubah arah cross axis, Anda perlu mengubah wrap-reverse pada properti flex-wrap.

Singkatan dari Flex-flow

Properti flex-flow adalah singkatan dari flex-direction dan flex-wrap. Misalnya, Anda dapat menggunakan:

1	flex-flow: column wrap;

yang sebenarnya adalah:

1	flex-direction: column;
2	flex-wrap: wrap;

Properti Penyelarasan dalam Flexbox

Penyelarasan (alignment) dalam flexbox dapat terjadi di sepanjang main dan cross axis.

Salah satu properti (justify-content) merupakan milik main axis, sementara tiga properti lainnya (align-items, align-self, align-content) merupakan milik cross axis.

Seperti yang Anda duga, perilaku dari properti alignment akab bergantung pada properti flex-direction. Sebagai contoh, justify-content akan mengarahkan item secara horizontal jika flex-direction adalah row atau row-reverse, dan akan mengarahkan item secara vertikal jika flex-direction adalah column atau column-reverse. Hal ini merupakan kelebihan dari flexible box (flexbox).

Alignment Sepanjang Main Axis

Properti justify-content akan menyelaraskan semua item flex yang berada di dalam container di sepanjang main axis. Hal ini dikarenakan browser menyisakan ruang yang cukup banyak setelah menghitung area yang diperlukan untuk semua item. Properti justify-content dapat memiliki lima value:

flex-start - item flex diselaraskan ke arah main axis dimulai (pengaturan default)
flex-end - item flex diselaraskan ke arah main axis berakhir
center - item flex diselaraskan di bagian tengah dari main axis
space-between - item flex diletakkan secara merata dalam main axis, dari flex-start sampai flex-end
space-around - item flex diletakkan secara merata dalam main axis, tetapi menyisakan setengah ruang kosong di setiap ujungnya

Untuk menggunakan justify-content dengan benar, Anda perlu memperhatikan arah sumbu. Misalnya, justify-content: flex-start;aturan ini akan meletakkan item flex secara berdekatan ke arah main axis dimulai. Item flex akan mengarah dari kiri ketika flex-direction adalah row, akan mengarah dari kanan ketika row-reverse, akan mengarah dari atas ketika column, and akan mengarah dari bawah ketika column-reverse.

Beberapa contoh berikut menunjukkan perbedaan dalam menggunakan value di properti justify-content dan flex-direction dengan value row.

Alignment Sepanjang Cross Axis

Sekarang mari kita naik ke level selanjutnya. Anda dapat menggunakan tiga properti CSS untuk menyelaraskan item sepanjang cross axis. Dua diantaranya (align-items dan align-self) digunakan untuk alignment pada satu garis (single-line alignment), sementara align-contentdigunakan untuk alignment pada banyak garis (multi-line alignment).

Single-Line Alignment

Properti align-items dan align-self menentukan bagaimana peletakkan item flex sepanjang cross axis. Kenyataannya, dua properti tersebut melalukan hal yang sama, yang membedakannya adalah align-items menyelaraskan semua item dalam container, sedangkan align-self menerapkan penyelarasan untuk masing-masing item flex.

Berikut value yang dapat digunakan untuk kedua properti tersebut:

auto - membuat properti align-self mewarisi value dari align-items (pengaturan default untuk align-self)
flex-start - item flex diselaraskan ke arah cross axis dimulai
flex-end - item flex diselaraskan ke arah cross axis berakhir
center - item flex diselaraskan di bagian tengah dari cross axis
baseline - item flex diselaraskan sesuai garis baseline alignment
stretch - item flex akan direnggangkan sepanjang cross axis untuk mengisi ruang pada container (pengaturan default untuk align-items)

Contoh di bawah ini menunjukkan bagaimana properti align-itemsdan align-self berperilaku ketika flex-direction adalah row. Cross axis secara default akan berjalan dari atas ke bawah. Masing-masing item memiliki jumlah padding yang berbeda sehingga dapat mengubah ketinggian dan baseline-nya. Seperti yang Anda lihat, misalnya, value flex-start akan menyelaraskan item flex ke arah cross axis dimulai, sementara flex-end akan menyelaraskannya ke arah sebaliknya.

Sebenarnya, ketika flex-direction adalah column atau column-reverse, tampilan akan berubah menjadi column-based layout sehingga properti align-items dan align-self akan menyelaraskan item secara horizontal sebagai gantinya.

Multi-Line Alignment

Properti align-content memungkinkan penyelarasan multi-line sepangjang cross axis. Hal ini menentukan jarak antar item flex dalam banyak baris. Properti align-content tidak akan berpengaruh di container flex dalam satu baris (misalnya, ketika konten tidak dibungkus). Properti ini memiliki enam value yang berbeda:

flex-start - item flex diselaraskan ke arah cross axis dimulai
flex-end - item flex diselaraskan ke arah cross axis berakhir
center - item flex diselaraskan di bagian tengah dari cross axis
space-between - item flex diletakkan secara merata dalam cross axis, dari flex-start sampai flex-end
space-around - item flex diletakkan secara merata dalam cross axis, tetapi menyisakan setengah ruang kosong di setiap ujungnya
stretch - item flex akan direnggangkan sepanjang cross axis untuk mengisi ruang pada container (pengaturan default)

Beberapa contoh berikut menunjukkan perbedaan dalam menggunakan value di properti align-content. Seperti demo sebelumnya, default axis sudah diterapkan.

Dua contoh sebelumnya tidak memiliki properti single-line (align-items) yang ditentukan, jadi semua item akan direntangkan secara default. Dalam contoh berikut ini, kita akan mengatur align-items: flex-start; sehingga item akan diselaraskan ke arah cross axis dimulai, tetapi kita akan mengatur align-content: flex-end; sehingga konten dapat sejajar dengan ujung sumbu:

Jika Anda telah memahami semua yang telah dilalui dalam tutorial ini, you’ve done very well! Anda sekarang memiliki pemahaman dasar yang kuat mnegenai flexbox alignment.

Kesimpulan

We’re done! Sebagai kesimpulan; hal yang paling penting untuk diingat adalah Anda harus memahami arah dari main dan cross axis. Selalu mulai alignment dengan mengatur properti flex-direction. Untuk mempelajari lebih lanjut tentang flexbox alignment dan mempraktekkannya, Anda dapat melihat artikel berikut juga:

Panduan resmi W3C untuk flexbox alignment Bahasan yang berat, tetapi bacaan yang bermanfaat; juga panduan awal untuk flexbox.
Cara menyelaraskan item dalam flex container Demo interaktif dan contoh kode dari MDN.
Flexbox Cheatsheet oleh Joni Trythall Lembar contekan PDF yang rapi untuk diunduh.
Flexbox Froggy Sebuah game online untuk belajar flexbox, dengan kodok dan lily pads. Jika Anda ingin belajar flexbox alignment dengan lebih menarik, cobalah game ini (Anda dapat mempraktekkan semua yang kita bahas dalam tutorial ini).