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,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; width:900px; margin:auto; } .flex-container div { margin: 10px; } </style> </head> <body> <div class="flex-container"> <div><img src="ml1.jpg" /></div> <div><img src="ml2.jpg" /></div> <div><img src="ml3.jpg" /></div> <div><img src="ml4.png" /></div> </div> <div class="flex-container"> <div><img src="ml1.jpg" /></div> <div><img src="ml2.jpg" /></div> <div><img src="ml3.jpg" /></div> <div><img src="ml4.png" /></div> </div> </body> </html> |
Yang jika teman-teman save maka hasilnya akan seperti berikut ini :
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:
1 2 3 4 5 6 7 8 9 10 |
<div class="flex-container"> <div><img src="ml1.jpg" /></div> <div><img src="ml2.jpg" /></div> <div><img src="ml3.jpg" /></div> <div><img src="ml4.png" /></div> <div><img src="ml1.jpg" /></div> <div><img src="ml2.jpg" /></div> <div><img src="ml3.jpg" /></div> <div><img src="ml4.png" /></div> </div> |
Kita jadikan keseluruhan gambar yang kita atas kedalam satu div, lalu teman-teman tambahkan script css berikut ini:
1 2 3 4 5 6 |
.flex-container { display: flex; width:900px; margin:auto; flex-wrap: wrap; } |
jadi kelengkapan scriptnya seperti berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; width:900px; margin:auto; flex-wrap: wrap; } .flex-container div { margin: 10px; } </style> </head> <body> <div class="flex-container"> <div><img src="ml1.jpg" /></div> <div><img src="ml2.jpg" /></div> <div><img src="ml3.jpg" /></div> <div><img src="ml4.png" /></div> <div><img src="ml1.jpg" /></div> <div><img src="ml2.jpg" /></div> <div><img src="ml3.jpg" /></div> <div><img src="ml4.png" /></div> </div> </body> </html> |
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