Membuat Kolom dengan Flex

24/11/2014    Aulia Rahmah Alhafidz    771     Website

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 :

Membuat-Kolom-dengan-Flex

Semoga bermanfaat ya :)

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More