Membagi Kolom Pada Website Dengan Propertis Display:flex Pada CSS
Hallo teman-teman semuanya? apa kabar? gimana masih semangat belajarnya, kali ini pembahasan kita masih seputar css, karena css betul-betul lah luas dan banyak propertis propertis baru yang terdapat di css3, bagi panduan kali ini saya akan membahas mengenai membagi kolom di blog dengan propertis display flex di css
Mungkin teman-teman telah banyak yang mendengar mengenai propertis yang satu ini, disini saya akan menjelaskan sedikit mengenai display:flex di css, kegunaan display flex ialah bagi membangun suatu area dengan secara otomatis berkolom atau membangun area area didalam suatu area yang mempunyai nilai flex menjadi berkolom atau berbaris, teknik dengan menggunakan display flex ini dapat membangun blog dengan banyak kolom berbaris dengan lebih gampang,
Bagi lebih jelasnya kita seketika saja praktek, coba teman-teman ketikan script berikut ini :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class=container>
<div class=flex> 1</div>
<div class=flex> 2</div>
<div class=flex> 3</div>
</div>
</body>
</html>
script diatas saya membangun sebuah area dimana didalamnya ada 3 div dengan class flex, nah sekarang ini kita akan masuk kepada bagian cssnya, silahakan teman-teman ketikan script css berikut ini:
<style>
.container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: green;
}
.flex{
background-color: #fff;
width: 100px;
height: 100px;
margin: 10px;
text-align:center;
}
</style>
Apabila telah silahkan teman-teman jalankan di browser, karenanya hasilnya akan seperti ini :
hasil dapat seperti gambar diatas karena area pembungkusnya saya berikan display flex, jadi kita tak mesti memfolat lagi area didalamnya bagi membangun kotak putih kesamping seperti gambar diatas.
Gimana lumayan gampang bukan? teknik flex, ialah teknik simple bagi membangun kolom di suatu area, oke teman-teman bagi panduan kali ini mengenai membagi kolom di blog dengan propertis display flex di css, lumayan hingga disini dulu, semoga panduan kali ini dapat bermanfaat bagi teman-teman semuanya, hingga bertemu lagi di panduan berikutnya. pesan saya jangan pernah bosan bagi terus belajar, tetep semangat ya teman-teman
Terima kasih
Sumber https://kursuswebsite.org
