Hallo teman-teman balik lagi pada tutorial dumet school, kali ini kita akan membahas fungsi dari properti display:flex, untuk teman-teman yang belum faham fungsi dari display flex, display flex berfungsi untuk membuat element-element HTML Menjadi sejajar secara horizontal, nah mungki masih pada bingung, kita langsung saja praktekan.
Silahkan buat file dan ketikan script berikut :
<div id="contain"> <div style="background-color:blue;"></div> <div style="background-color:white;"></div> <div style="background-color:red;"></div> </div>
Saya mengatur masing masing warna div yang saya berikan di atas dengan css inline untuk warnanya.
Nah jika sudah save, lalu sekarang kita beralih ke cssnya silahkan teman-teman ketikan script berikut:
#contain {
width: 220px;
height: 150px;
border: 1px solid black;
display: flex;
}
#contain div {
flex: 7;
}
Jika teman-taman save maka hasilnya akan sperti berikut:
bagaimana, mudah kan? jadi perlu diingat, fungsi display flex ialah membuat element-element html menjadi sejajar secara horizontal, bahkan kita bisa juga membangun website multiple colom dengan properties display flex.
oke cukup sekian artikel kali ini semoga bermanfaat, terimakasih.