Pada video ini kita akan membahas mengenai properti justify-content, yang berfungsi untuk mengatur pembagian ruang yang tersisa pada flexbox berdasarkan arah Main Axis. Sebagai contoh disini, Main Axis sedang berada di arah default, yaitu mulai dari kiri ke kanan. Ada 6 buah nilai yang dapat kita gunakan pada justify-content.

Yang pertama flex-start, dimana kotak disusun di bagian awal Main Axis, yaitu sebelah kiri, sedangkan sisa ruangnya berada di sebelah kanan.

Nilai kedua adalah flex-end, dimana kotak disusun di bagian akhir Main Axis, yaitu di sebelah kanan, sedangkan sisa ruangnya berada di sebelah kiri.

Nilai ketiga adalah center, dimana kotak disusun di bagian tengah flexbox. Sedangkan sisa ruang akan dibagi 2, separuh di sebelah kiri dan separuhnya lagi di sebelah kanan.

Nilai keempat adalah space-around, dimana sisa ruang akan menjadi margin di bagian kiri dan kanan setiap kotak. Perhatikan disini bahwa jarak antar kotak menjadi dua kali lebih banyak daripada jarak antara tepi container ke kotak pertama.

Nilai kelima adalah space-evenly, dimana sisa ruang akan dibagi rata ke semua kotak.

Sedangkan nilai terakhir adalah space-between, dimana kotak pertama akan menempel ke tepi awal Main Axis. Dan kotak terakhir akan menempel ke tepi akhir Main Axis. Sedangkan sisa ruangnya dibagi rata menjadi jarak antar kotak.

Kita langsung mulai praktek ya. Kita buka kembali source code terakhir dari pelajaran sebelumnya. Kita akan membahas mengenai properti justify-content. Justify-content digunakan untuk mengatur pembagian ruang yang tersisa pada flexbox berdasarkan Main Axis. Jadi disini ada 2 hal yang harus kita perhatikan ya. Yang pertama adalah harus ada ruang yang tersisa. Yang kedua adalah kita harus memperhatikan arah dari Main Axis. Kita ubah dahulu flex-direction menjadi row, sehingga Main Axis menjadi ke arah default yaitu dari kiri ke kanan. Perhatikan kotak kita akan berurutan satu dua tiga empat lima dari kiri ke kanan.

Sekarang perhatikan ke kelas container. Disini bisa dilihat bahwa container kita memiliki lebar sebesar 600 pixel. Dan kemudian lihat lagi ke kelas box. Lebar kelas box adalah 100 pixel. Kita memiliki 5 buah kotak, dengan lebar masing-masing 100 pixel. Maka lebar total kelimat kotak adalah 500 pixel. Apabila kelima kotak ini kita taruh di dalam container yang lebarnya 600 pixel, maka ada kelebihan ruang sebesar 100 pixel, yang bisa kita lihat pada sebelah kanan kotak nomor 5.

Jadi ini hal pertama yang penting ya. Harus ada space atau ruang yang tersisa. Dengan menggunakan property justify-content, maka kita akan mengatur ruang yang tersisa ini akan ditaruh di sebelah mana.

Sekarang hal kedua yang penting adalah kita harus tau arah Main Axis kita. Mengapa? Karena ruang yang tersisa ini akan diatur berdasarkan Main Axisnya. Sebagai contoh, berhubung sekarang arah Main Axis kita adalah default dari kiri ke kanan, maka sisa ruang container akan berada di sebelah kanan.

Namun perlu diingat bahwa arah Main Axis bisa kita ganti menggunakan properti flex-direction. Sebagai contoh, saya ganti nilai flex-direction menjadi row-reverse, maka Main Axis akan berganti arah menjadi dari kanan ke kiri. Kita lihat sekarang sisa ruang container berpindah dari tadinya di sebelah kanan, menjadi di sebelah kiri.

Saya ubah kembali flex-direction menjadi row. Dan kita akan mencoba untuk menambahkan properti justify-content. Nilai default dari properti justify-content adalah flex-start. Artinya elemen-elemen di dalam flexbox akan di taruh di bagian start atau bagian awal dari Main Axis. Berhubung posisi Main Axis sekarang adalah default, dari kiri ke kanan, maka bagian start-nya berada di sebelah kiri, sedangkan bagian end berada di sebelah kanan. Kotak-kotak kita akan disusun di sebelah kiri flexbox, sedangkan sisa ruang kosong akan dibiarkan berada di sebelah kanan kotak terakhir.

Selanjutnya, nilai justify-content yang akan kita coba adalah flex-end. Artinya elemen-elemen di dalam flexbox akan ditaruh di bagian akhir Main Axis. Kita lihat ya hasilnya, kotak-kotak kita disusun di sebelah kanan container, sedangkan sisa ruang kosong dibiarkan di sebelah kiri kotak pertama. Perhatikan susunan kotak tetap urut 1 2 3 4 5 ya. Tidak dibalik.

Perhatikan kalau saya menggunakan flex-direction row-reverse dengan justify-content flex-start. Maka posisi ruang kosong sama-sama di sebelah kiri. Namun urutan kotaknya menjadi 5 4 3 2 1. Hal ini disebabkan karena arah Main Axis berubah dari kanan ke kiri, sehingga kotak disusun dari arah kanan ke kiri.

Nah, sekarang perhatikan lagi kalau saya ubah justify-content menjadi flex-end. Arah Main Axis saat ini adalah dari kanan ke kiri. Kalau kita menggunakan flex-end, maka kotak akan disusun di bagian end dari Main Axis, yaitu di sebelah kiri. Namun perhatikan bahwa urutan kotaknya tetap 5 4 3 2 1. Karena kotak tetap disusun dari arah kanan ke kiri.

Seperti yang telah kita pelajari pada video sebelumnya, kita juga bisa mengubah arah Main Axis menjadi vertikal dari atas ke bawah, yaitu dengan cara mengubah nilai flex-direction menjadi column. Agar tidak bingung, nilai justify-content kita kembalikan dahulu ke flex-start ya. Sekarang kita lihat bahwa kotak disusun dari atas ke bawah, sedangkan sisa ruang berada di sebelah bawah kotak nomor 5.

Kita bisa mengganti agar kotak-kotak disusun di bagian akhir Main Axis, yaitu disusun di bagian bawah. Kita ubah nilai justify-content menjadi flex-end. Sekarang sisa ruang menjadi berada di bagian atas kotak nomor 1. Sedangkan nomor urut kotak kalau kita lihat dari atas adalah 1 2 3 4 5.

Selanjutnya kita bisa memindahkan lagi arah Main Axis menjadi dari bawah ke atas, dengan cara mengubah flex-direction menjadi column-reverse. Pertama kita lihat dahulu justify-content dengan nilai flex-start. Hasilnya masih sama seperti yang barusan ya. Namun urutan kotak kalau dilihat dari atas menjadi 5 4 3 2 1. Hal ini disebabkan karena Main Axis dimulai dari bawah, ke atas.

Dan kalau kita ganti nilai justify-content menjadi flex-end, maka kotak akan disusun di bagian akhir Main Axis, yaitu bagian atas. Sedangkan sisa ruang kosong akan berada di bagian bawah kotak nomor 1. Perhatikan nomor urut kotak adalah 5 4 3 2 1.

Bagi teman-teman yang masih bingung, bisa mengulangi video ini ya. Disini kita mesti sudah memahami mengenai arah Main Axis, dimulai dari mana ke arah mana. Karena cara menggunakan properti justify-content sangat bergantung dari arah Main Axis. Begitu juga properti-properti yang akan kita bahas pada video berikutnya.

Sekarang kita kembalikan dahulu Main Axis ke nilai default row, dengan arah dari kiri ke kanan. Kita akan mencoba nilai justify-content lainnya. Pertama kita coba dahulu nilai center. Artinya kotak kita akan disusun di bagian tengah container. Ruang sisa akan dibagi 2, separuhnya ditaruh di sebelah kiri dan separuh lagi ditaruh di kanan.

Kemudian ada beberapa nilai lain yang menarik. Namun untuk menunjukkannya secara lebih jelas, pertama saya ubah dahulu padding pada container menjadi 0. Nilai selanjutnya yang bisa kita gunakan pada justify-content adalah space-around. Artinya ruang sisa akan menjadi margin sebelah kiri dan kanan untuk setiap kotak di dalam flexbox. Perhatikan kotak pertama, di sebelah kirinya menjadi ada margin, dan di sebelah kanannya ada margin. Begitu juga kotak nomor dua, di sebelah kirinya ada margin, dan kanannya juga ada margin. Akibatnya, jarak antara kotak pertama ke kotak kedua mejadi dua kali lebih besar dibandingkan jarak kotak pertama ke tepi container.

Apabila teman-teman ingin agar jarak kotak pertama ke tepi container tetap sama dengan jarak kotak pertama ke kotak kedua, maka kita bisa menggunakan nilai space-evenly. Artinya sisa ruang akan dibagikan secara rata.

Dan nilai terakhir dari justify-content yang bisa kita gunakan adalah space-between. Artinya kotak pertama akan menempel ke bagian awal Main Axis. Dan kotak terakhir akan menempel di bagian akhir Main Axis. Sisa ruang akan dibagikan secara rata antar kotak.

Nilai-nilai dari justify-content ini bisa juga digunakan untuk flex-direction yang berbeda. Sebagai contoh, ini kita langsung cepat saja ya. Kita ubah flex-direction menjadi column. Ini adalah hasil justify-content dengan nilai space-between. Lalu kita coba nilai-nilai lainnya, yaitu space-evenly. Space-around. Dan center.

Nantinya teman-teman bisa mencoba lagi sendiri bagaimana hasil dari justify-content yang digunakan pada flex-direction yang berbeda.

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.