Hai, apakah kamu ingin tahu alasan apa yang harus banget bikin kamu lupain CSS sekarang juga? Maksudnya, bukan lupain gitu aja sih, tapi kita harus move on dari cara-cara lama ke cara-cara baru yang lebih simpel dan fleksibel dalam layouting website.

Flexbox (modul dari CSS3) merupakan alasan untuk kita move on dari cara-cara lama dalam layouting website. Dengan Flexbox, kita tidak perlu lagi menggunakan Float, Width : 100% dan mendeskripsikan ukuran @media untuk membuat tampilan kita menjadi responsif di semua device. Kita juga tidak perlu lagi repot menerka-nerka nilai Margin untuk membuat sebuah jarak antar-item yang hendak kita buat, karena Flexbox telah membuat segalanya terlihat menjadi lebih indah (*mirip lagu ya..).

Oke deh, kenalan sama Flexbox-nya udahan kan? Berikut beberapa contoh penggunaan Flexbox untuk membuat tampilan website kita menjadi lebih rapih di segala sisi, dan pastinya juga responsif di semua device.

Hal yang paling pertama kita lakukan adalah mengatur property Display menjadi Flex pada Container kita. Property tersebut akan mengubah layout model Container menjadi Flexbox dan mengubah elemen yang ada di dalamnya menjadi Flex-item.

Penerapan display: Flex

Secara default, Flex menyajikan tampilan kita berupa row seperti gambar diatas. Jika kita menginginkan tampilan berupa column, kita bisa mengubahnya dengan bantuan property Flex-direction.

Berikut adalah preview ketika kita mengatur Flex-direction menjadi Column.

Penerapan Flex-direction Column

Selain property Flex-direction, di sini juga akan dibahas sedikit mengenai property Justify-content.

Berikut ini adalah contoh nilai-nilai yang bisa digunakan pada property Justify-content:

Flex-start

Flex-start akan meratakan elemen di awal Main-axis. Dalam contoh ini, awal Main-axis adalah kiri, sehingga item-item akan menjadi rata kiri. Berbeda hasilnya jika Flex-direction kita ubah menjadi Row-reverse, maka Flex-start akan dimulai dari kanan.

Flex-start dimulai dari kiri jika direction-nya Row

Flex-end

Sama halnya dengan Flex-start, item akan diurutkan di akhir Main-axis. Pada contoh ini, item-item akan dibuat menjadi rata kanan.

Flex-end meratakan item ke ujung Main Axis

Center

Karena nilainya Center, maka sudah dipastikan nilai ini akan membuat item menjadi rata tengah.

Rata tengah pada main axis

Space-between

Space-between akan meratakan item secara merata. Item paling kiri menjadi rata kiri, item paling kanan menjadi rata-kanan, dan item ditengah akan diposisikan secara seimbang mengikuti space yang ada. Dengan begitu, kita tidak perlu mengatur nilai margin-nya.

Space-between menambahkan area kosong di dalamnya.

Space-around

Space-around hampir sama dengan Space-between. Perbedaannya, space-around akan membagikan sisa kekosongan dari container secara merata pada item-itemnya.

Space around akan membagikan sisa ruang kepada masing-masing item

Demikian, pengenalan sedikit mengenai Flexbox. Semoga bisa menambah pengetahuan coding kamu dalam layouting website.

Buat kamu yang jadi penasaran dengan Flexbox atau buat kamu yang mau mengasah kemampuan kamu dalam layouting menggunakan Flexbox, kamu bisa coba game ini:

Permainan Flexbox Defense

*Mohon cek juga browser support (sesuai dengan kebutuhan) sebelum menggunakan CSS Flexbox.

About the author

Dian Sari Aisyah
Front-End Developer at

Saya sangat tertarik dan bahagia di dunia Front-End Development, sehingga bisa mendorong saya untuk menciptakan sebuah Tagline "Colouring your brain with codes and colouring your heart with loves".