Membuat Kolom dengan Flex

Banyak cara yang bisa digunakan untuk membagi suatu div ke dalam beberapa kolom. Seperti menggunakan overflow dan float. Namun, sebenarnya ada alternatif untuk membuat kolom. Sehingga memudahkan kita dalam mengatur tata letak website.

Inilah Properties CSS "Flex". Ada yang sudah mencobanya? Jika belum, coba untuk mengikuti script di bawah ini.

Kita akan mencoba membuat 3 kolom. Buat strukturnya seperti berikut

<div id="content">

<div class="kolom" style="background-color:#e74c3c">Ini kolom pertama</div>

<div class="kolom" style="background-color:#e67e22">Ini kolom kedua dengan isi : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at odio nec magna tempus scelerisque. Praesent tristique dolor eu pellentesque pharetra.</div>

<div class="kolom" style="background-color:#f1c40f">Ini kolom ketiga</div>

</div>

Dan sekarang, kita akan menggunakan fungsi flex yang ada di dalam properties CSS.

#content {  
    width: 400px;  
    height: 300px;  
    display: flex;  
}  
#content .kolom {  
    flex: auto;  
} 

Dan hasilnya akan menjadi seperti berikut :

Semoga bermanfaat ya :)