Sebelum kita masuk dalam pembahasan Flexbox, saya akan menjelaskan sedikit tentang Website. Website merupakan hal yang tidak dapat dipisahkan dari kehidupan manusia sekarang ini. Banyak hal yang kita lakukan secara online menggunakan website. Untuk itu banyak sekali pekerjaan programmer yang berfokus pada pembuatan website atau bisa disebut web development. Pekerjaan web development ini tergolong menjanjikan karena banyak perusahaan yang membutuhkan website sebagai sarana promosi. Secara umum website sendiri dibagi menjadi 3 yaitu Company Profile, Toko Online, dan Blog. Setelah beberapa tahun membangun halaman website, saya menyadari salah satu hal penting dalam membangun halaman website adalah pengaturan tata letak (layout) bagian-bagian yang ingin ditampilkan untuk pengunjung website. Halaman website dapat dilihat menarik atau tidak dari penempatan setiap bagian (element) yang tepat dan sesuai dengan fungsinya. Terkadang permasalahan yang terjadi adalah pengaturan layout ini yang tidak sesuai dengan yang kita harapkan seperti jarak yang tidak seimbang antar element, membuat element berada di tengah halaman secara horizontal dan vertikal, dan masih banyak permasalahan lain.
Untuk mengatasi beberapa permasalahan tersebut, CSS memberikan solusi dengan CSS Flexible Box Layout atau Flexbox. Pada artikel ini, akan dijelaskan tentang Flexbox tersebut dan cara menggunakannya.
Layout Halaman Website
Layout Website adalah pengaturan tata letak element atau konten dari halaman website. Layout yang tepat dapat membuat website lebih menarik para pengunjung untuk menjelajahi website kita. Desain layout yang baik membuat pengunjung dapat berpindah halaman dengan mudah melalui navigasi yang baik. Pada umumnya layout halaman website terdiri dari beberapa bagian yaitu: header, navigation, sidebar, content, dan footer. Setiap bagian memiliki kegunaan secara umum yang berbeda antara satu dengan yang lain. Header biasanya akan berisi logo dan deskripsi dari dari halaman website yang merupakan identitas. Pada header juga biasanya terdapat menu utama website. Navigation merupakan bagian untuk berpindah ke bagian lain. Sidebar biasanya terdapat di kiri atau di kanan atau di kedua sisi berguna sebagai informasi tambahan dari website. Content merupakan isi dari halaman website kita. Dan footer merupakan bagian bawah halaman website yang biasanya terdapat kontak perusahaan, sitemap, media sosial dan banyak lagi. Struktur layout secara umum dapat dilihat pada gambar di bawah ini.
https://bertzzie.com/knowledge/desain-web-dasar/Layout.html
Setiap bagian layout dapat bersifat statis maupun dinamis. Dengan data yang dinamis ini web programmer harus memperhitungkan ukuran dan jarak antar element yang akan dibuat. Namun, terkadang saat membuat layout halaman website, kita mengalami beberapa kesulitan mengikuti desain yang diinginkan. Saya akan memberikan contoh hal yang sulit dalam layout halaman website.
Membuat content berada di tengah container secara vertikal dan horizontal
Untuk membuat hasil seperti gambar di atas dengan CSS biasa merupakan hal yang cukup rumit, karena kita perlu mengatur jarak keempat sisi element dengan container. Berdasarkan pengalaman pribadi saya sebelum mengenal Flexbox, desain seperti itu memang sering muncul pada desain dan tanpa Flexbox memang masih mungkin dilakukan tapi sangat rumit untuk dikerjakan.
Memberikan jarak yang sama antar element dalam container
Desain yang sering muncul adalah desain dengan jarak antar element dalam container. Biasanya element tersebut merupakan data yang dinamis dan didapat dari generate data database atau API. Untuk membuat layout seperti itu tanpa Flexbox kita perlu menghitung dengan tepat jarak antar element.
Setelah saya mempelajari Flexbox, kedua kasus tersebut dapat diselesaikan dengan mudah dan cepat dengan Flexbox. Dengan Flexbox kode yang kita buat juga cenderung lebih singkat untuk kedua kasus tersebut. Untuk itu saya akan menjelaskan tentang Flexbox dan properti-properti yang dapat digunakan oleh Flexbox tersebut untuk mendapatkan hasil yang sesuai dengan keinginan.
Flexbox
Pengertian Flexbox
Flexible Box Module atau Flexbox merupakan model layout satu dimensi yang digunakan untuk mengatur jarak dan penjajaran antar item dalam sebuah interface atau bisa disebut container [1]. Dari pengertian tersebut, disebutkan model layout satu dimensi. Satu dimensi di sini diartikan dalam mengatur jarak dan penjajaran hanya dapat mengatur satu dimensi saja per satu waktu. Contohnya adalah mengatur kolom saja (vertikal) atau baris saja (horizontal), tidak dapat mengatur keduanya secara bersamaan.
Setiap item yang terdapat pada container ini dapat bersifat statis maupun dinamis yang diambil atau di generate dari database atau API. Dengan Flexbox, data yang dinamis ini akan diatur secara otomatis. Sehingga kita tidak perlu mengatur hal-hal seperti ukuran setiap data dan pengaturan lain-lainnya.Istilah Yang Perlu Dipahami Dalam Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Untuk membuat Flexbox terdapat beberapa istilah yang perlu dipahami dalam Flexbox. Istilah tersebut antara lain:
Container dan Items
Container sering juga disebut sebagai Parent. Merupakan element yang membungkus beberapa item. Beberapa item ini sering juga disebut sebagai Child. Items merupakan element-element di dalam container.Main Axis dan Cross Axis
Main Axis adalah sumbu utama dari container. Tidak selamanya main axis ini horizontal. Main axis ini dapat diatur dengan properti flex-direction yang akan dijelaskan pada bagian Properti Container. Cross Axis adalah sumbu yang bersilangan dengan main axis. Jika Main Axis memiliki arah horizontal maka Cross Axis memiliki arah vertikal, begitupun sebaliknya.Main Size dan Cross Size
Main Size adalah ukuran dari container yang relatif terhadap Main Axis. Sedangkan Cross Size adalah ukuran dari kolom yang relatif terhadap Main Axis.Main Start dan Main End
Items yang berada di dalam container akan berada di antara Main Start dan Main End.Cross Start dan Cross End
Items yang berada di dalam container akan berada di antara Cross Start dan Cross End.
Properti Container
display
Properti display digunakan untuk membuat container atau parent menjadi flex. Properti ini merupakan properti yang wajib dalam membuat flexbox. Karena jika container tidak diberikan properti display maka flexbox ini tidak akan bekerja. Properti ini juga membuat element di dalam container (child) menjadi flex.
Berikut adalah contoh sederhananya, kita akan membuat container dengan 4 buah item di dalamnya seperti gambar di bawah ini,Tanpa properti display maka hasilnya adalah setiap item akan berurut kebawah.
Untuk membuat setiap item berurut ke samping, kita dapat menggunakan float dan clear untuk setiap element. Untuk mempersingkat penulisan kode dengan menggunakan display, kita tidak perlu menggunakan float dan clear untuk setiap element.flex-direction
Properti flex-direction digunakan untuk mengatur arah/urutan element di dalam container. Arah/urutan yang dapat digunakan ada 4 macam, yaitu:
Horizontal (row), mengatur arah element dari kiri ke kanan dan berada di dalam bagian kiri container.
Kebalikan Horizontal (row-reverse), mengatur arah element dari kanan ke kiri dan berada di dalam bagian kanan container.
Vertikal (column), mengatur arah element dari atas ke bawah dan berada di dalam bagian atas container.
Kebalikan Vertikal (column-reverse), mengatur arah element dari bawah ke atas dan berada di dalam bagian bawah container.
Berikut adalah hasil dari code sebelumnya setelah ditambahkan flex-direction:Horizontal (row)
Kebalikan Horizontal (row-reverse)
Vertikal (column)
Kebalikan Vertikal (column-reverse)
flex-wrap
Properti flex-wrap digunakan untuk mengatur container saat element di dalamnya sudah penuh pada satu baris. Wrap ini digunakan untuk memindahkan element ke baris di bawahnya. Terdapat beberapa flex-wrap yang dapat digunakan, yaitu:Nowrap, secara default setiap element akan berusaha memenuhi container baik baris atau kolom dengan nowrap.
Wrap, element akan turun ke baris dibawahnya saat sudah mencapai batas ukuran container.
Wrap-reverse, merupakan kebalikan dari wrap. Dengan wrap-reverse element akan naik ke baris di atasnya.
Berikut adalah hasil dari code sebelumnya setelah ditambahkan flex-wrap dan menambahkan width pada container.
Nowrap
Wrap
Wrap-reverse
justify-content
Properti justify-content digunakan untuk mengatur penjajaran dari element di dalam container secara horizontal. Penjajaran yang diatur ini tergantung dari main axis-nya. Properti ini juga membantu membuat ruang kosong yang kita butuhkan. Ada beberapa justify-content yang dapat digunakan, yaitu:Flex-start, mengatur ruang kosong berada di akhir kumpulan element.
Flex-end, mengatur ruang kosong berada di awal kumpulan element.
Center, mengatur ruang kosong berada di sisi kiri dan kanan dari kumpulan element.
Space-between, mengatur ruang kosong berada di antara element dengan element pertama menempel pada main-start container dan element terakhir pada main-end container.
Space-around, mengatur ruang kosong berada di antara element dengan jarak sisi kiri dan kanan dengan garis tengah antar 2 element memiliki ukuran yang sama.
Space-evenly, mengatur ruang kosong antar element dengan jarak yang sama.
Berikut adalah hasil dari code sebelumnya setelah ditambahkan justify-content.Flex-start
Flex-end
Center
Space-between
Space-around
Space-evenly
align-items
Properti align-items digunakan untuk mengatur penjajaran dari element di dalam container secara vertikal. Penjajaran yang diatur ini tergantung dari cross axis-nya. Properti ini juga membantu membuat ruang kosong yang kita butuhkan. Ada beberapa align-items yang dapat digunakan, yaitu:
Flex-start, mengatur element berada di bagian dalam atas container.
Flex-end, mengatur element berada di bagian dalam bawah container.
Center, mengatur element berada di tengah secara vertikal
Stretch, mengatur ukuran tinggi element. Jika element memiliki tinggi maka akan mengikuti tinggi tersebut. Namun, jika element tidak memiliki tinggi maka tinggi element tersebut akan memenuhi container.
Baseline, mengatur posisi element berdasarkan kesejajaran text yang terdapat di dalam element tersebut.
Berikut adalah hasil dari code sebelumnya setelah ditambahkan align-items dan mengatur height dari containerFlex-start
Flex-end
Center
Stretch
a. Jika element di dalamnya memiliki height
b. Jika element di dalamnya tidak memiliki heightBaseline (mensejajarkan text yang ada di dalam item)
align-content
Properti align-content hanya digunakan saat lebih dari satu baris flex. Penggunaan properti ini mirip dengan justify-content pada cross axis-nya. Properti ini biasa digunakan bersama dengan properti flex-wrap. Beberapa align-content yang dapat digunakan antara lain:Flex-start, mengatur element berada di bagian dalam atas container.
Flex-end, mengatur element berada di bagian dalam bawah container.
Center, mengatur element berada di bagian tengah container.
Stretch, mengatur tinggi element memenuhi container jika element tersebut tidak memiliki tinggi.
Space-between, mengatur jarak ruang kosong antar baris yang sama dengan baris pertama menempel pada cross start dari container.
Space-around, mengatur jarak ruang kosong antar baris yang sama. Pada hasilnya akan diawali dengan ruang kosong dan akan diikuti dengan baris pertama dari element tersebut.
Berikut adalah hasil dari code sebelumnya setelah ditambahkan align-content, flex-wrap, dan mengatur height dan width dari container.Flex-start
Flex-end
Center
Stretch
Space-between
Space-around
Properti Items
order
Properti order digunakan untuk mengatur urutan dari setiap element. Properti ini sangat berguna jika kita ingin mengubah urutan element tanpa banyak mengubah kode yang telah kita buat. Agar properti ini dapat berjalan dengan baik, maka setiap element pada container harus diberikan order dan tidak boleh hanya sebagian element yang diberi properti order.flex-grow
Properti flex-grow digunakan untuk mengatur perbandingan ukuran dari setiap element. Dengan flex-grow kita tidak perlu mengatur width dari setiap element, karena setiap ukuran element akan berbanding sesuai dengan flex-grow yang ditentukan.align-self
Properti align-self digunakan untuk mengatur penjajaran element secara spesifik terhadap cross-axis.
Flexbox vs. Bootstrap
Beberapa orang sering bertanya mengapa perlu menggunakan Flexbox kalau sudah ada Bootstrap dalam membangun website. Untuk menjawab pertanyaan itu kita perlu tahu perbedaan dari kedua hal tersebut. Pada tabel di bawah ini akan dijelaskan perbedaan dari Flexbox dan Bootstrap.Tabel 1 Perbandingan Flexbox dengan Bootstrap[3]
Dari perbandingan tabel tersebut dapat diambil kesimpulan bahwa Flexbox dan Bootstrap memiliki fungsi yang berbeda. Bootstrap adalah framework untuk membangun website sedangkan Flexbox adalah CSS. Bahkan pada Bootstrap 4 Layout menggunakan Flexbox. Untuk mempermudah membangun website kita dapat menggunakan Bootstrap karena sudah ditangani untuk masalah responsivenya. Namun, tidak semua dapat diselesaikan dengan Bootstrap. Terkadang kita perlu membuat Style CSS sendiri pada bagian-bagian tertentu. Maka dari itu, kita dapat menggunakan flexbox untuk mengatasi permasalahan yang tidak dapat diselesaikan menggunakan Bootstrap. Karena Flexbox ini merupakan CSS jadi akan lebih banyak kustomisasi yang dapat digunakan untuk membangun website sesuai yang kita inginkan.
Jadi kalau ditanya mana yang lebih baik, maka jawabannya semua sama karena memiliki fungsi yang berbeda-beda tergantung pada kasusnya.
Kesimpulan
Flexbox merupakan teknik CSS yang dapat digunakan untuk mengatur layout element pada halaman website secara horizontal maupun vertikal. Flexbox ini dapat digunakan saat kita ingin membuat konten berada di tengah container, memberi jarak yang sama antar element dalam container, mengatur jarak tiap baris pada container, dan masih banyak improvisasi lainya dengan menggunakan flexbox. Bootstrap dan Flexbox merupakan hal yang berbeda dan memiliki kegunaan yang berbeda. Bootstrap 4 sendiri menggunakan Flexbox pada Layoutnya untuk menangani bagian-bagian responsive. Selain itu tidak semua content yang kita buat menggunakan Bootstrap akan sesuai dengan keinginan kita maka dari itu kita perlu membuat Style CSS sendiri dan salah satu yang dapat digunakan adalah Flexbox.
Referensi
