fungsi propertis flex-wrap pada teknik flexbox CSS3

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,

<!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:

<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:

.flex-container {
  display: flex;
  width:900px;
  margin:auto;
  flex-wrap: wrap;
}

jadi kelengkapan scriptnya seperti berikut ini:

<!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

Fungsi Propertis Flex-wrap Pada Teknik Flexbox CSS3

Kategori