Hai teman-teman semuanya, apa kabar? kita lanjut lagi belajarnya, masih seputar tenik flex-box pada css3, untuk pembahasan kali ini kita akan belajar fungsi propertis flex-wrap pada teknik flexbox CSS3.

Pada tutorial sebelumnya saya telah memiliki script seperti ini untuk membuat sebuah galeri pada halaman website,

Yang jika teman-teman save maka hasilnya akan seperti berikut ini :

membuat galeri gambar dengan teknik flexbox di css3

Nah cara diatas masih bertele-tele karena kita harus membuat 2 baris flex-container untuk membuat galeri sepert diatas, ada satu propertis yang berfungsi untuk membuat gambar menesuaikan sendiri terhadap pembungkus flexboxnya, yaitu proertis flex-wrap, dengan menggunakan properti ini kita hanya membuat sebuah div pembungkus flexnya, kita letakan didalamnya gambar berapapun maka sigambar akan menyesuaikan membuat baris baru menyesuaikan pembungkusnya,

coba script diatas htmlnya teman-teman rubah menjadi seperti berikut ini:

Kita jadikan keseluruhan gambar yang kita atas kedalam satu div,  lalu teman-teman tambahkan script css berikut ini:

jadi kelengkapan scriptnya seperti berikut ini:

jika teman-teman save maka hasilnya akan sama saja dengan kita membuat 2 pembungkus, cara ini tentunya lebih evisien dari cara sebelumnya,

Oke teman-teman untuk tutorial kali ini tentang fungsi propertis flex-wrap pada teknik flexbox CSS3 saya rasa cukup sampai disini dulu, semoga dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya,

Terima kasih