Setelah kemarin kita sudah belajar mengenai box-sizing, sekarang kita masuk dalam fungsi flex-wrap di CSS, flex-wrap adalah dimana salah satu fungsi flex-box yang menentukan apakah item yang flexsibel harus di bungkus atau tidak, memang paling enak kita langsung lihat contohnya ya, oke maka dari itu jangan kemana-mana simak terus ya teman-teman.

Oke jadi seperti yang saya tulis di atas fungsi flex-wrap di CSS, ketika saya mempunyai sebuah beberapa konten yang tampil secara sejajar, dan setiap konten mempunyai lebar dan ketika width konten sudah melebihi dari lebar pembungkusnya dia akan kebawah seperti itu, jadi berguna sekali ketika kita ingin membuat website responsive ya, karena ketika sudah menggunakan flex-box ketika widthnya sudah kecil konten yang ada di dalamnya tidak akan berpengaruh, malahan yang ada konten ikut mengecil.

Oke langsung saja bagaimana cara menggunakannya disini saya mempunyai sebuah kasus, saya membuat 3 boxs dimana setiap box mempunyai lebar yang berbeda, jadi disini saya langsung memberikan widthnya kedalam pembungkusnya jadi seolah-olah saya sudah melebihi dari batas pembungkusnya.

Silahkan teman-teman copy kodenya dibawah ini:

Seperti yang teman-teman lihat disini saya mempunyai sebuah 3 boxs dimana box1 = 200px, box2 = 500px, box3 = 400px, sedangkan saya membuat containernya itu 1000px, jika kita jumlahkan 3 boxs itu pasti melebihi bukan, dan disini saya membuatnya kesamping dengan menggunakan display: flex, yang mana walaupun konten box sudah melebihi lebar pembungkusnya tidak akan berpengaruh maka dari itu disini saya berikan pada containernya, seperti di atas flex-wrap: wrap oke lalu bagaimana hasilnya seperti ini:

Fungsi flex-wrap di CSS dan Cara Menggunakannya

seperti yag teman-teman lihat di gambar, ketika sudah melebihi maka box akan turun ke bawah, oke sudah jelas ya tentang Fungsi flex-wrap di CSS dan Cara Menggunakannya semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.