Pada video sebelumnya, kita telah belajar mengenai cara membuat flexbox sederhana dan membandingkannya dengan float. Pada video ini dan berikutnya, kita akan belajar mengenai properti-properti yang bisa kita gunakan untuk mengatur flexbox. Yang pertama adalah flex-direction, yang bisa kita gunakan untuk mengatur arah flexbox, yang secara default adalah dari kiri ke kanan. Arah ini bisa kita ganti menjadi dari kanan ke kiri, atau atas kebawah dan juga sebaliknya.

Oke, sebelum kita melanjutkan ke coding, ada baiknya kita mengenal beberapa istilah yang sering digunakan pada Flexbox. Yang pertama adalah Main Axis. Main Axis adalah sumbu utama dari flexbox kita, yang mengatur bagaimana cara kita mengurutkan elemen-elemen di dalam flexbox. Secara default, main axis kita adalah sumbu horizontal, dari kiri ke arah kanan.

Istilah yang kedua adalah Cross Axis. Cross Axis ini berada di 90 derajat dari Main Axis. Berhubung Main Axis kita adalah sumbu horizontal, maka secara default Cross Axis adalah sumbu vertikal, dari atas ke bawah.

Nah, kalau melihat kedua istilah ini, mungkin teman-teman akan bertanya. Kenapa mesti menggunakan istilah baru main axis dan cross axis? Kenapa tidak menggunakan istilah yang lazim digunakan seperti sumbu horizontal dan vertikal, atau sumbu x dan y. Jawabannya adalah arah main axis bisa kita putar ke arah lain. Bisa saja main axis kita putar ke sumbu vertikal, sehingga cross axisnya yang berada di 90 derajat dari main axis, akan secara otomatis berubah menjadi horizontal. Sedangkan nantinya di dalam pengaturan properti flexbox, harus berdasarkan arah dari main axis dan cross axisnya.

Selanjutnya kita masuk ke properti pertama yang bisa kita gunakan untuk mengatur Flexbox. Nama properti ini adalah flex-direction, digunakan untuk mengatur arah Main Axis. Nilai default dari flex-direction adalah row, yang artinya Main Axis kita berada di sumbu horizontal, bergerak dari kiri ke kanan.

Nilai selanjutnya adalah row-reverse, yang artinya Main Axis kita berada di sumbu horizontal. Namun arah gerakannya dibalik menjadi dari kanan ke kiri.

Nilai lain yang bisa kita gunakan pada flex-direction adalah column dan column-reverse. Keduanya akan mengubah sumbu Main Axis menjadi vertikal. Dengan menggunakan nilai column, maka Main Axis akan bergerak dari atas ke bawah. Sedangkan dengan menggunakan nilai column-reverse, maka Main Axis akan bergerak dari bawah ke atas.

Oke sekarang kita masuk ke sesi coding. Saya sudah membuka source code dari video sebelumnya. Namun sebelum kita membahas mengenai flex-direction, ada beberapa hal yang perlu kita sesuaikan terlebih dahulu ya. Terutama agar Atom dan Chrome tetap bisa enak kita lihat bersebelahan seperti ini. Kita belajarnya juga bisa lebih gampang ya, karena bisa melihat source code di sebelah kiri dan hasilnya di sebelah kanan.

Pertama kita buka dahulu source code CSS. Kita ke selector kelas container. Saya ubah lebar container menjadi 600px. Dan saya tambahkan property height dengan nilai 600px juga. Saya tambahkan border dengan nilai 5px solid yellow. Dan yang terakhir saya beri padding sebanyak 10px.

Lalu untuk kelas box, ukurannya saya kecilkan menjadi 100x100 pixel. Dan saya tambahkan property box-sizing dengan nilai border-box. Jadi kotak ini walaupun ada border sebanyak 2 pixel, ukurannya tetap 100x100 pixel ya.

Sekarang kita masuk ke properti pertama yang bisa kita gunakan untuk mengatur flexbox, yaitu flex-direction. Properti ini bisa kita tuliskan di dalam kelas container. Dan dari auto-complete kita bisa melihat bahwa nilai yang bisa kita pilih ada 4 ya, yaitu column, column-reverse, row, dan row-reverse. Nilai default dari flex-direction adalah row, sehingga kalau kita isikan dengan nilai row, maka pada browser tidak ada perubahan. Kotak disusun dari arah kiri ke kanan.

Kalau nilai flex-direction kita ganti menjadi row-reverse, maka kotak akan disusun dari arah kanan ke kiri. Hasil penyusunan kotak seperti ini masih bisa kita dapatkan dengan menggunakan properti float dengan nilai right.

Selanjutnya apabila kita menggunakan nilai column, maka kotak akan disusun dari arah atas ke bawah. Nah, untuk penyusunan secara vertikal seperti ini sudah tidak bisa menggunakan float. Disinilah kelebihannya Flexbox dibandingkan Float. Cara pengaturannya lebih flexible.

Dan yang terakhir, apabila kita menggunakan nilai column-reverse, maka kotak akan disusun dari arah bawah ke atas.

Oke, kita lihat praktek dari flex-direction ini masih sederhana ya. Kita kembali ke teori. Tadi kita sudah mengenal istilah Main Axis dan Cross Axis. Dan kita juga sudah belajar mengenai properti flex-direction yang dapat mengubah arah Main Axis. Secara default, nilai flex-direction adalah row, sehingga Main Axis akan bergerak dari arah kiri ke kanan.

Seperti yang sudah saya jelaskan sebelumnya, arah Main Axis ini bisa kita putar-putar, dengan cara mengganti nilai flex-direction. Apabila nilai flex-direction saya ganti menjadi row-reverse, maka arah Main Axisnya akan berubah menjadi dari kanan ke kiri. Disini masih gampang ya, karena Cross Axisnya masih tetap sama.

Hal yang membuat konsep ini menjadi lebih rumit adalah apabila kita mengubah flex-direction menjadi Column. Akibatnya arah Main Axis akan berubah menjadi vertikal, dari atas ke bawah. Dan berhubung Cross Axis mengarah ke 90 derajat dari Main Axis, maka Cross Axis secara otomatis berubah menjadi sumbu horizontal, dengan nilai default dari kiri ke kanan. Nah, disinilah kita harus memahami dengan benar, yang mana Main Axis dan yang mana Cross Axis. Karena nantinya kita akan bermain dengan properti-properti yang akan bergantung kepada arah Main Axis dan arah Cross Axis.

Dan ini adalah nilai terakhir yang bisa kita gunakan pada properti flex-direction, yaitu column-reverse. Nilai ini akan mengubah arah Main Axis menjadi vertikal dari bawah ke atas. Sedangkan Cross Axisnya menjadi horizontal dari kiri ke kanan.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.