Mengenal Apa Itu CSS3 FlexBox, Masa Depan Layout Website

Posted by Andika Saputra on 13 Februari 2017

Ada yang pernah mendengar atau membaca mengenai Flexbox? Khususnya bagi web developer. Nah, di sini kita akan berkenalan dengan Flexbox. Apa itu Flexbox, kenapa kita harus kenal flexbox, dan yang pasti kenapa harus menggunakan flexbox. Oke, langsung saja kita bahas.

Apa itu Flexbox?

Flexbox adalah salah satu fitur baru dari CSS3 yang sangat memudahkan dalam membuat layout sebuah website. Kalau dulu, setiap membuat layout website, biasanya seorang web developer menggunakan float left, float right. Dan ketika menggunakan sebuah float, muncul masalah baru yaitu height element tersebut menjadi 0. Nah, untuk mengatasi itu, digunakanlah css clear.

Untuk membuat layout dengan maksimal 2 kolom, css float masih tergolong mudah untuk digunakan, akan tetapi untuk layout yang jumlah kolomnya cukup banyak, cukup sulit jika menggunakan float. Apa lagi jika harus membuat perataan item kolomnya. Misal, kita ingin membuat layout 3 kolom, kolom paling kanan mepet ke kanan, kolom kiri mepet ke kiri, dan kolom tengah berada ditengah dengan space yang sama antara kiri dan tengah dengan kanan dan tengah. Sangat susah jika menggunakan float, karena akan menggunakan banyak sekali div.

Kemudian munculah flexbox di css versi 3. Dengan menggunakan css ini, sangat memudahkan dalam pembuatan layout website. Kita hanya membuat sebuah wrapper dengan style display flex, kemudian tinggal membuat item di dalam wrapper tersebut.

Kenapa Menggunakan Flexbox?

Nah, terus kenapa kita harus menggunakan flexbox? Yang pasti dengan menggunakan flexbox ini kita tidak perlu memikirkan lagi soal clear css, atau pun float. Penggunaannya pun sangat mudah. Seperti yang saya sebut di atas, kita hanya perlu membuat sebuah wrapper dengan display flex. Kemudian kita buat item di dalam wrapper tadi, maka otomatis item tersebut akan berjajar tanpa menggunakan float.

Tidak hanya itu, kita juga bisa dengan mudah mengatur aligment dari item tadi, bisa rata kiri, kanan, atau tengah. Kita juga bisa mengatur arah itemnya, bisa kesamping (horizontal), bisa juga menurun (vertikal).

Ada banyak fitur yang bisa kita gunakan untuk mempermudah dalam membuat layout website.

Kompatibilitas

Ketika kita membahas teknologi baru, dalam hal ini css3 flexbox, tentu kompatibilitas menjadi isu yang cukup penting. Apa artinya teknologi atau fitur canggih, jika nantinya perangkat (web browser) tidak mendukung fitur tersebut. Fitur flexbox mendukung rata-rata web browser modern saat ini, Chrome 21+, Opera 12.1+, Firefox 22+, Safari 6.1+, hingga IE 10+. Untuk lebih jelasnya bisa cek di link caniuse ini.

Borwser mendukung css3 flexbox

Web browser yang mendukung CSS3 Flexbox

Kesimpulan

Dengan menggunakan CSS3 Flexbox ini, membuat layout sebuah website tidak lagi terlalu ribet harus memikirkan float dan clear css. Dan karena merupakan teknologi CSS3 yang cukup baru, walau pun sudah bertahun-tahun lalu, hanya web browser yang cukup modern yang mendukung flexbox. Namun bagaimana pun, kita harus optimis menatap ke depan user akan menggunakan web browser yang mendukung teknologi flexbox ini.

Pada tulisan ke depan, saya akan menuliskan bagaimana cara menggunakan flexbox ini.