Pada video sebelumnya kita telah membahas properti justify-content, yang berfungsi untuk mengatur pembagian ruang yang tersisa pada flexbox berdasarkan arah Main Axis. Properti ini hanya bisa berfungsi apabila ada ruang yang tersisa. Hal ini menimbulkan pertanyaan, apa yang akan terjadi apabila tidak ada ruang yang tersisa sama sekali? Mari kita coba ya.

Kita buka kembali source code kita pada pelajaran sebelumnya. Pertama kita ubah dahulu flex-direction ke nilai default-nya yaitu row. Nah sekarang kotak-kotak kita sudah berjejer ke samping. Perhatikan bahwa kita miliki container dengan lebar 600 pixel, di dalamnya kita memiliki 5 buah kotak yang masing-masing lebarnya 100 pixel, sehingga kita masih memiliki sisa ruang sebesar 100 pixel. Sekarang kita ganti lebar dan tinggi dari container kita menjadi 300 pixel. Jadinya lebar container tidak mencukupi untuk kelima kotak. Apakah yang akan terjadi?

Nah, ternyata flexbox akan memaksa seluruh kotak untuk menggunakan seluruh ruang yang tersedia, yaitu 300 pixel dibagi 5 sehingga masing-masing kotak hanya mendapatkan lebar 60 pixel. Dalam kasus seperti ini, nilai apapun pada properti justify-content tidak akan berpengaruh terhadap hasil flexbox.

Pada video ini, kita akan mempelajari mengenai properti flex-wrap. Dengan menggunakan properti ini, kita bisa mengatur apa yang akan terjadi apabila jumlah ruang container tidak mencukupi untuk seluruh items di dalam flexbox.

Kita mulai dari teori terlebih dahulu. Ada 3 buah nilai yang bisa kita gunakan pada flex-wrap. Nilai pertama yang merupakan nilai default adalah nowrap, dengan menggunakan nilai ini maka flexbox akan memaksa semua item untuk berada di satu baris yang sama. Apabila jumlah ruang pada flexbox tidak mencukupi, maka jumlah ruang pada masing-masing item akan diperkecil hingga semuanya bisa muat dalam satu baris.

Nilai kedua dari flex-wrap adalah wrap, yang artinya apabila jumlah ruang pada flexbox tidak mencukupi, maka item boleh berpindah ke baris berikutnya. Dan kembali lagi disini kita harus memahami mengenai konsep Main Axis dan Cross Axis yang telah diajarkan pada video sebelumnya. Disini kita menggunakan arah default Main Axis yaitu dari kiri ke kanan, dan arah default Cross Axis dari atas ke bawah. Jadi perhatikan disini bahwa kotak pertama akan dimulai dari bagian kiri atas flexbox. Kemudian kotak berikutnya disusun berdasarkan arah Main Axisnya, yaitu ke arah kanan dan kebetulan jumlah ruang masih mencukupi untuk kotak kedua dan ketiga. Kotak keempat disusun berdasarkan arah Cross Axis berikutnya, yaitu di bawah baris pertama dan dimulai kembali dari sisi paling kiri. Dan kotak kelima berada di sebelah kanan kotak keempat.

Nilai ketiga dari flex-wrap adalah wrap-reverse. Fungsinya masih sama dengan nilai wrap, namun kita membalikan arah Cross Axisnya. Jadi sekarang Cross Axisnya dimulai dari bawah menuju ke atas. Perhatikan kotak pertama disusun dari bagian bawah kiri flexbox. Kotak berikutnya disusun ke kanan. Dan apabila jumlah ruang tidak mencukupi, maka kotak berikutnya akan disusun pada baris diatasnya.

Sekarang kita mulai praktek ya. Kita tambahkan properti flex-wrap pada kelas container, pertama kita isi dengan nilai default terlebih dahulu yaitu nowrap. Maka tidak ada perubahan ya. Karena sebelumnya kita memang sudah menggunakan nilai nowrap.

Kita ubah nilai flex-wrap menjadi wrap. Maka hasilnya akan sama dengan yang telah kita pelajari pada teori barusan. Kotak akan disusun mulai dari kiri atas, bergerak ke kanan. Pada saat jumlah ruang sudah tidak mencukupi, maka kotak akan berpindah ke baris berikutnya sesuai arah cross axis, yaitu ke bawah. Kotak mulai disusun kembali dari kiri ke kanan.

Perhatikan pada baris kedua, terdapat ruang sisa pada sebelah kanan kotak nomor 5. Sisa ruang ini bisa kita atur menggunakan properti justify-content. Sebagai contoh saya ganti nilainya menjadi flex-end. Maka kotak keempat dan kelima akan disusun di bagian akhir Main Axis, yaitu di sebelah kanan. Sedangkan kotak satu dua dan tiga tidak ada perubahan karena tidak ada ruang sisa sama sekali.

Kita juga bisa menggunakan nilai-nilai lain pada justify-content, seperti center, space-around, dan lain-lain. Sekarang kita kembalikan ke nilai default flex-start.

Lalu kita coba ganti nilai flex-wrap menjadi wrap-reverse. Disini kita membalikkan arah Cross Axis menjadi dari bawah ke atas. Maka kotak akan disusun dari bawah kiri, ke arah kanan. Apabila ruang tidak mencukupi, maka kotak berikutnya akan disusun di baris berikutnya berdasarkan arah Cross Axis, yaitu diatas baris pertama.

Sampai disini masih gampang ya, karena kita masih menggunakan arah default dari Main Axis dan Cross Axis. Selanjutnya kita akan mencoba untuk mengganti arah Main Axis. Nantinya kalau teman-teman merasa bingung, saya sarankan untuk mencoba sendiri pada komputer masing-masing, untuk melihat bagaimana efek dari pergantian arah Main Axis dan Cross Axis.

Pertama kita ganti dahulu flex-direction menjadi row-reverse. Artinya Main Axis akan bergerak dari kanan ke kiri. Dan flex-wrap kita kembalikan ke nilai wrap. Perhatikan bahwa kotak akan disusun dari bagian kanan atas, kemudian bergerak ke kiri. Pada saat jumlah ruang tidak mencukupi, maka kotak akan berpindah ke bawah, dimulai dari kanan ke kiri.

Kalau kita ganti nilai flex-wrap menjadi wrap-reverse. Artinya kita memindahkan Cross Axis menjadi dari bawah ke atas. Maka kotak akan disusun dari kanan bawah, menuju ke kiri. Sedangkan baris berikutnya berada di atas baris pertama.

Nah sekarang kita tukar Main Axis menjadi vertikal, dari atas ke bawah, dengan cara mengganti nilai flex-direction menjadi column. Pertama kita coba dahulu mulai dari nilai nowrap.

Hasilnya kotak-kotak akan disusun dari atas ke bawah, dan akan dipaksakan menjadi satu baris ya. Namun disini kita lihat kotaknya keluar dari kontainer. Hal ini disebabkan karena di dalam kotak ada konten berupa nomor urut kotak, dan kebetulan kita menggunakan ukuran font yang terlalu besar. Misalkan font size kita ganti menjadi 2 rem, maka ukuran kotak akan diubah sehingga pas dengan ukuran containernya.

Selanjutnya kita ganti kembali font size menjadi 4 rem, dan kita ganti nilai flex-wrap menjadi wrap. Nah, sekarang perhatikan bahwa arah Main Axis kita adalah dari atas ke bawah, sedangkan arah Cross Axis adalah dari kiri ke kanan. Kotak pertama akan dimulai dari kiri atas. Lalu bergerak sesuai dengan arah Main Axis, yaitu ke bawah. Satu, dua, tiga. Dan pada saat jumlah ruang tidak mencukupi, maka kotak akan berpindah ke baris berikutnya yaitu ke sebelah kanan. Kotak akan disusun kembali dari sisi paling atas, ke arah bawah. Empat, Lima.

Dan kita coba nilai terakhir dari properti flex-wrap, yaitu wrap-reverse. Artinya kita membalikkan arah Cross Axis menjadi dari kanan ke kiri. Perhatikan bahwa sekarang kotak disusun dari kanan atas ke arah bawah. Dan pada saat jumlah ruang sudah tidak mencukupi, maka kotak akan membuat baris baru di sebelah kiri baris pertama.

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.