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.
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.
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-end
Sama halnya dengan Flex-start, item akan diurutkan di akhir Main-axis. Pada contoh ini, item-item akan dibuat menjadi rata kanan.
Center
Karena nilainya Center, maka sudah dipastikan nilai ini akan membuat item menjadi rata tengah.
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-around
Space-around hampir sama dengan Space-between. Perbedaannya, space-around akan membagikan sisa kekosongan dari container secara merata pada item-itemnya.
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:
*Mohon cek juga browser support (sesuai dengan kebutuhan) sebelum menggunakan CSS Flexbox.