Mengenal lebih dalam tentang Flexbox CSS3
Hallo teman-teman, dihari yang cerah dan indah ini dipembahasan kali ini saya ingin sharing pengalaman saya seputar laman, dan disini saya akan membahas mengenai Mengenal lebih pada mengenai Flexbox CSS3.
Di dasarnya Flexible box atau lebih dikenal dengan Flexbox yakni sebuah mode layout yang digunakan bagi mengatur letak posisi bebas sebuah faktor di halaman laman. Artinya, elemen-elemen tersebut dapat diatur sedemikian rupa sehingga dapat menyesuaikan ukuran layar dan diposisikan diantara elemen-elemen pada sebuah container.
Bagi 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-tama</div>
<div class=kotak>Kotak Kedua</div>
<div class=kotak>Kotak Ketiga</div>
<div class=kotak>Kotak Keempat</div>
</div>
Bila telah, simpan file htmlnya. Dan kemudian langkah berikutnya 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;}Bila telah dengan HTML dan CSS nya, langkah berikutnya teman-teman dapat seketika jalankan/run dibrowser yang teman-teman gunakan karenanya hasilnya akan terlihat seperti di gambar dibawah ini :
Bila hasil dibrowser telah seperti di gambar diatas karenanya teman-teman telah berhasil pada pemakaian Flexbox CSS3. Dengan menggunakan flexbox ini jadi tak usah mengatur satu-persatu element dengan menggunakan float atau yang lainnya. Dan silahkan teman-teman coba kalau display:flex; nya dihapus lihat apa yang akan terjadi ? dan silahkan teman-teman bikin kesimpulan sendiri mengenai Flexbox CSS3 ini.
Oke lumayan demikianlah pembahasan bahan kali ini mengenai Mengenal lebih pada mengenai Flexbox CSS3. Bila ada kekurangan pada penulisan ini harap dimaklumi hehehe hingga bertemu di pembahasan berikutnya.
Semoga bermanfaat, Terimakasih
Sumber https://kursuswebsite.org
