Pada video ini kita akan membicarakan mengenai beberapa properti yang dapat membantu kita untuk mengatur ukuran item di dalam flexbox. Yang pertama adalah flex-basis, yang berfungsi untuk mengatur ukuran awal dari item sebelum terjadi penambahan ataupun pengurangan ukuran. Yang kedua adalah flex-grow, yang berfungsi untuk mengatur seberapa banyak sisa ruang yang digunakan untuk menambah ukuran item. Nilai default dari flex-grow adalah 0, yang artinya tidak bertambah sama sekali. Yang ketiga adalah flex-shrink, yang berfungsi untuk mengatur berapa banyak ukuran item yang berkurang apabila jumlah ruang pada container tidak mencukupi. Nilai default dari flex-shrink adalah 1, yang berarti seluruh item di dalam flexbox secara default akan mengalami pengurangan ukuran dalam jumlah yang sama.

Kita mulai praktek. Kita buka source code dari video sebelumnya. Kita kembalikan dahulu source code kita ke kondisi default dengan cara menghapus properti flex-direction pada kelas container. Lalu kita hapus juga properti order pada kelas green dan blue.

Oke, pertama kita akan mencoba properti flex-basis terlebih dahulu. Properti ini bisa kita tambahkan pada item, bukan pada container flexbox. Kalau kita lihat di kode HTML, kita bisa melihat bahwa kita menggunakan tag section sebagai container flexbox. Lalu di dalamnya kita menggunakan tag div sebagai item-nya. Kelas box digunakan di semua item. Sedangkan kelas warna digunakan di salah satu item.

Kita kembali ke kode CSS. Kalau misalkan kita ingin mengubah ukuran semua item dalam flexbox, maka kita bisa menambahkan properti flex-basis di dalam kelas box. Misalkan kita tambahkan flex-basis dengan nilai 125px. Artinya lebih besar ya daripada width yang sekarang 100px.

Kita simpan dan refresh browser. Sekarang lebar setiap kotak berubah menjadi lebih besar, yaitu 125 pixel. Properti width yang kita tuliskan disini menjadi tidak berpengaruh terhadap ukuran item.

Mengapa menggunakan properti flex-basis? Kenapa tidak menggunakan properti width dan height saja? Jawabannya adalah karena Main Axis pada Flexbox bisa kita ganti ke arah lain. Sedangkan properti flex-basis ini adalah ukuran yang mengikuti arah Main Axis.

Sebagai contoh, saya tambahkan di kelas container, properti flex-direction dengan nilai column. Maka Main Axis berubah menjadi vertikal dari atas ke bawah. Dan sekarang ukuran flex-basis pun berubah dari yang tadinya mempengaruhi width menjadi height.

Selanjutnya kita akan membahas mengenai flex-grow. Properti ini sangat berguna pada saat kita bermain di website responsive, yaitu website yang tetap bisa dibaca dengan nyaman walaupun kita mengaksesnya dari device apa pun, jadi bisa dari smartphone, tablet, maupun PC. Namun sebelum melanjutkan, kita hapus kembali properti flex-direction dan flex-basis. Sekarang kotak kita kembali ke kondisi default, dengan nomor 1 sampai 5 yang bersusun ke samping kanan, dan terdapat ruang kosong di sebelah kanan kotak nomor 5.

Nah, sekarang saya ubah width container, dari tadinya fixed 600 pixel, menjadi 95% dari ukuran layar. Sekarang kita melihat ada sisa ruang yang lebih besar pada sebelah kanan kotak nomor 5. Dan apabila saya memperbesar ataupun memperkecil browser, maka ukuran kotak tetap sama, sedangkan ukuran ruang kosong di sebelah kanan akan membesar dan mengecil.

Apabila masih ada ruang kosong pada Main Axis, maka kita bisa mengatur agar ukuran kotak menjadi semakin besar untuk menempat ruang kosong tersebut. Caranya adalah dengan menambahkan properti flex-grow. Apabila kita menambahkan flex-grow pada kelas box, maka semua kotak akan turut membesar. Sedangkan kalau kita menambahkan flex-grow pada masing-masing kelas warna, maka hanya kotak dengan warna tersebut saja yang membesar.

Sebagai contoh pertama, kita tambahkan dahulu properti flex-grow pada kelas box, dengan nilai 1. Maka sekarang semua kotak akan membesar dan mengisi seluruh ruang yang ada pada Main Axis. Apabila saya memperbesar ataupun memperkecil browser, maka ukuran kotak akan turut berubah.

Yang menariknya disini adalah, kalau misalkan saya menghidupkan wrap pada container. Perhatikan pada saat saya mengecilkan kotak hingga ukuran kotak menjadi lebih kecil dari 100 pixel. Maka kotak yang tidak muat akan berpindah ke bawah. Dan kotak yang dibawahnya ini akan menempati seluruh ruang Main Axis.

Agar lebih jelas, saya ubah lagi ukuran width dan height pada kelas box menjadi 200 x 200 pixel. Perhatikan bahwa pada saat jumlah ruang mencukupi untuk 1 baris, maka kelima kotak akan membesar dan ukuran yang sama. Kemudian saya perkecil browser. Pada saat ukuran tidak cukup, maka kotak kelima turun duluan dan menempati seluruh ruang di baris kedua. Kemudian pada saat ruang tidak mencukupi lagi, maka kotak keempat turun kebawah. Sekarang ukuran kotak 4 dan 5 menjadi separuh dari ukuran Main Axis. Dan pada saat saya perkecil lagi, maka posisi kotak berubah menjadi 3 baris, dimana kotak nomor 5 menempati seluruh ukuran main axis pada baris ketiga.

Sekarang saya hapus kembali properti flex-wrap dan properti flex-grow. Lalu saya kembalikan ukuran kotak menjadi 100x100 pixel. Selanjutnya kita bisa mengatur agar hanya salah satu kotak saja yang membesar, misalkan hanya kotak merah saja. Caranya? Kita menambahkan properti flex-grow di kelas .red, sehingga yang terpengaruh hanya kotak berwarna merah saja. Perhatikan sekarang bahwa kotak merah membesar dan mengisi seluruh ruang sisa pada Main Axis. Sedangkan kotak lainnya ukurannya tetap sama.

Kita juga bisa mengatur agar kotak lain turut membesar. Misalkan kita tambahkan flex-grow dengan nilai 1 pada kelas .yellow. Nah, sekarang pada saat saya memperbesar dan memperkecil ukuran browser, maka ukuran dari kotak merah dan kuning akan turut berubah. Namun perhatikan bahwa ukuran kotak merah dan kotak kuning selalu sama. Hal ini disebabkan karena kedua kotak memiliki nilai flex-grow yang sama, yaitu 1.

Kita bisa mengatur agar kotak kuning membesar 2 kali lebih banyak daripada kotak merah, dengan cara mengubah nilai flex-grow menjadi 2. Sekarang perhatikan, pada saat saya memperbesar browser, maka kotak kuning mendapatkan jatah pembesaran yang 2 kali lebih banyak dibandingkan dengan kotak merah.

Kalau misalkan saya inspect. Bisa dilihat disini bahwa ukuran kotak merah adalah 160 pixel. Ukuran awalnya adalah 100 pixel, dan kemudian mendapatkan pembesaran sebanyak 60 pixel. Kemudian kalau kita inspect ke kotak kuning, ukurannya adalah 220 pixel. Dengan ukuran awal kotak 100 pixel, maka berarti kotak kuning mendapatkan pembesaran sebanyak 120 pixel. Artinya kotak kuning membesar 2 kali lebih banyak dibandingkan kotak merah. Sedangkan ketiga kotak lainnya berukuran tetap 100 pixel.

Jadi beginilah cara kerja dari flex-grow ya. Nilai yang kita berikan adalah nilai perbandingan jatah pembesarannya, secara relatif dibandingkan ke item lainnya.

Nah, berkaitan dengan penambahan ukuran lebar, kita bisa batasi berapa lebar paling maksimal dari kotak kita. Caranya adalah dengan menambahkan properti max-width. Sebagai contoh, pada kotak kuning saya tambahkan max-width dengan nilai 300px. Sekarang perhatikan bahwa pada saat saya memperbesar ukuran browser, maka kotak kuning ikut membesar. Hingga maksimal di lebar 300 pixel. Setelah itu kotak kuning sudah tidak bertambah besar lagi. Semua tambahan lebar diambil oleh kotak merah. Kita juga bisa melakukan pembatasan seperti ini dengan menggunakan properti min-width, max-height dan min-height.

Selanjutnya kita akan membahas mengenai properti flex-shrink, yang berfungsi untuk mengatur pengurangan ukuran kotak, apabila jumlah ruang pada container tidak mencukupi. Secara default, nilai flex-shrink adalah 1, artinya ukuran kotak akan berkurang dengan porsi yang sama. Sebelum kita melanjutkan, kita hapus dahulu properti flex-grow dan max-width.

Sekarang perhatikan kalau saya mengecilkan ukuran browser hingga yang paling kecil, maka ukuran lebar dari masing-masing kotak akan turut mengecil. Perhatikan bahwa ukuran lebar dari kotak yang satu adalah sama dengan kotak-kotak lainnya. Artinya mereka mendapat pengurangan ukuran lebar dengan porsi yang sama, yaitu sama-sama di nilai 1.

Agar contohnya lebih jelas, kita ubah ukurang width dari kelas box menjadi 200 pixel. Jadi sekarang walaupun browser kita berukuran separuh layar, tetap tidak cukup untuk menampung semua ukuran kotak. Semua kotak diperkecil dengan porsi 1.

Kita bisa mengatur agar ukuran kotak tidak dikurangi, walaupun jumlah ruang container tidak mencukupi. Sebagai contoh, pada kelas red saya tambahkan properti flex-shrink dengan nilai 0. Nilai 0 artinya item ini tidak mengalami penurunan ukuran. Nah, sekarang perhatikan pada saat saya mengubah ukuran browser, ukuran lebar dari kotak merah tetap 200 pixel. Sedangkan keempat kotak lainnya menjadi semakin kecil.

Kalau nilai 0 pada flex-shrink saya ganti menjadi 2. Maka hasilnya kotak merah mengecil 2 kali lebih cepat dibandingkan dengan kotak lainnya.

Agar kita bisa lebih mudah menuliskan properti flex-grow, flex-shrink dan flex-basis, maka ada properti shorthand yang namanya properti flex. Properti shorthand flex ini mirip dengan properti border, seperti yang kita lihat pada kelas container. Dimana kita bisa menyingkat 3 buah properti border-width, border-style dan border-color menjadi 1 buah properti saja yaitu border. Dengan menggunakan properti flex, kita bisa mengisikan 3 buah properti, yaitu flex-grow, flex-shrink dan flex-basis.

Kalau misalkan kita tambahkan properti flex, dan kita mengisikan dengan 1 nilai saja yang ditambahkan satuan, misalkan pada kelas .red kita tambahkan properti flex dengan nilai 100px, maka akan diartikan oleh browser sebagai properti flex-basis dengan nilai 100px. Namun apabila kita memberikan nilai tanpa satuan, sebagai contoh diberi nilai 1 saja, maka diartikan sebagai flex-grow.

Apabila kita memberikan 2 buah nilai tanpa satuan, maka nilai pertama akan diartikan sebagai flex-grow, sedangkan nilai kedua diartikan sebagai flex-shrink. Sebagai contoh kita beri nilai 1 0, artinya flex-grow sebanyak 1 dan flex-shrink sebanyak 0. Kita lihat hasilnya, kotak merah tidak turut berubah ukuran pada saat browser diperkecil, namun kotak merah bertambah besar pada saat browser diperbesar.

Mengapa ukuran kotak merah menjadi kecil? Karena pada shorthand flex, kita tidak memberikan nilai flex-basisnya, sehingga diisikan dengan nilai default auto. Nilai default ini akan menyebabkan ukuran kotak disesuaikan dengan ukuran kontennya. Jadi ukuran kotak merah hanya sebesar angka 1. Kalau kita tambahkan lagi nilai pada properti flex dengan 100px, maka ukuran basis kotak akan menjadi 100 pixel. Kotak tidak turut mengecil pada saat ukuran browser kecil, namun kotak menjadi besar pada saat ukuran browser besar.

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.