Hallo teman-teman, dihari yang cerah dan indah ini dipembahasan kali ini saya ingin sharing pengalaman saya seputar website, dan disini saya akan membahas tentang Mengenal lebih dalam tentang Flexbox CSS3.
Pada dasarnya Flexible box atau lebih dikenal dengan Flexbox adalah sebuah mode layout yang digunakan untuk mengatur letak posisi bebas sebuah elemen pada halaman website. Artinya, elemen-elemen tersebut bisa diatur sedemikian rupa sehingga bisa menyesuaikan ukuran layar dan diposisikan diantara elemen-elemen dalam sebuah container.
Untuk lebih jelasnya mari kita mulai mempraktekannya, pertama-tama buka atau jalankan text editor yang teman-teman gunakan lalu masukan script HTML dibawah ini :
<div class="container"> <div class="kotak">Kotak Pertama</div> <div class="kotak">Kotak Kedua</div> <div class="kotak">Kotak Ketiga</div> <div class="kotak">Kotak Keempat</div> </div>
Jika sudah, simpan file htmlnya. Dan kemudian langkah selanjutnya teman-teman ketik script CSS dibawah ini :
.container{width:800px; background:lightblue; margin:auto; display:flex;}
.kotak{width:200px; height:100px; margin:10px; background:lightgreen;}
Jika sudah dengan HTML dan CSS nya, langkah selanjutnya teman-teman bisa langsung jalankan/run dibrowser yang teman-teman gunakan maka hasilnya akan terlihat seperti pada gambar dibawah ini :
Jika hasil dibrowser sudah seperti pada gambar diatas maka teman-teman sudah berhasil dalam penggunaan Flexbox CSS3. Dengan menggunakan flexbox ini jadi tidak usah mengatur satu-persatu element dengan menggunakan float atau yang lainnya. Dan silahkan teman-teman coba jika display:flex; nya dihapus lihat apa yang akan terjadi ? dan silahkan teman-teman buat kesimpulan sendiri tentang Flexbox CSS3 ini.
Oke cukup sekian pembahasan materi kali ini tentang Mengenal lebih dalam tentang Flexbox CSS3. Jika ada kekurangan dalam penulisan ini harap dimaklumi hehehe sampai bertemu di pembahasan selanjutnya.
Semoga bermanfaat, Terimakasih