Pembahasan kali ini kita akan belajar tentang mengenal flexbox pada css, sebelum saya melanjutkan kepada prakteknya terlebih dahulu saya akan menjelaskan sedikit tentang flexbox pada css.

semakin berkembangnya css sekarang ini semakin banyak pula propertis baru yang telah diupdet dengan hadirnya css3, dengan menggunakan css3 ini kita dapat membuat animasi atau teknik-teknik lainnya yang biasa kita lakukan dengan propertis baru yang telah disediakan pada css3, salahsatunya adalah teknik flexbox atau display flex pada css

Floxbox adalah suatu teknik floating atau layouting pada css, jadi pada konsepnya disini kita akan membuat sebuah layoting dengan menggunakan teknik flexbox, oke untuk lebih jelasnya kita langsung saja praktekan teman-teman silahakan buat sebuah file dan ketikan script berikut ini :

Script diatas saya membuat satubuah pembungkus bernama class kotak lalu membuat 5 div, jika sudah silahkan teman-teman tambahkan script css berikut ini :

Dengan saya menambahkan display flex pada bagian pembungkusnya itu menandakan bahwa element didalamnya telah berlaku sistem floating atau sistem layouting, jadi ketika teman-teman save maka hasilnya akan seperti berikut ini :

Mengenal Flexbox Pada CSS img1

Hasilnya seluruh konten akan otomatis kesamping seperti halnya kita menggunakan float pada css namun kali ini kita menggunakan display flex atau teknik flexbox pada css3,

Gimana teman-teman? cukup mudah bukan? untuk tutorial kali ini tentang mengenal flexbox pada css, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya, jangan pernah bosan belajar ya teman-teman.

Terimakasih