Membuat Gambar Bendera Perancis dengan Properties Display Flex CSS

Hallo teman-teman balik lagi di panduan Source Code Aplikasi, kali ini kita akan membahas guna dari properti display:flex, bagi teman-teman yang belum faham guna dari display flex, display flex berfungsi bagi membangun element-element HTML Menjadi sejajar secara horizontal, nah mungki masih di bingung, kita seketika saja praktekan.

Silahkan bikin 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 bagi warnanya.

Nah kalau telah save, lalu sekarang ini 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;
}

Bila teman-taman save karenanya hasilnya akan sperti berikut:

bagaimana, gampang kan? jadi perlu diingat, guna display flex ialah membangun element-element html menjadi sejajar secara horizontal, bahkan kita dapat pun membangun situs multiple colom dengan properties display flex.

oke lumayan demikian artikel kali ini semoga bermanfaat, terimakasih.

Sumber https://kursuswebsite.org