membagi kolom pada website dengan propertis display flex pada css

Hai teman-teman semuanya? apa kabar? gimana masih semangat belajarnya, kali ini pembahasan kita masih seputar css, karena css sangat lah luas dan banyak propertis propertis baru yang ada pada css3, untuk tutorial kali ini saya akan membahas tentang membagi kolom pada website dengan propertis display flex pada css

Mungkin teman-teman sudah banyak yang mendengar tentang propertis yang satu ini, disini saya akan menjelaskan sedikit tentang display:flex pada css, fungsi display flex adalah untuk membuat suatu area dengan secara otomatis berkolom atau membuat area area didalam suatu area yang mempunyai nilai flex menjadi berkolom atau berbaris, teknik dengan menggunakan display flex ini dapat membuat website dengan banyak kolom berbaris dengan lebih mudah,

Untuk lebih jelasnya kita langsung 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 membuat sebuah area dimana didalamnya ada 3 div dengan class flex, nah sekarang kita akan masuk kepada bagian cssnya, silahakan teman-teman ketikan script css berikut ini:

.flex{
background-color: #fff;
width: 100px;
height: 100px;
margin: 10px;
text-align:center;
}
</style>

Jika sudah silahkan teman-teman jalankan pada browser, maka hasilnya akan seperti ini :

hasil dapat seperti gambar diatas karena area pembungkusnya saya berikan display flex, jadi kita tidak harus memfolat lagi area didalamnya untuk membuat kotak putih kesamping seperti gambar diatas.

Gimana cukup mudah bukan? teknik flex, adalah teknik simple untuk membuat kolom pada suatu area, oke teman-teman untuk tutorial kali ini tentang membagi kolom pada website dengan propertis display flex pada css, cukup sampai disini dulu, semoga tutorial kali ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya. pesan saya jangan pernah bosan untuk terus belajar, tetep semangat ya teman-teman

Terima kasih

Membagi Kolom Pada Website Dengan Propertis Display:flex Pada CSS

Kategori