Flexible box atau flexbox CSS adalah sebuah sistem layout di CSS untuk mengatur, menyelaraskan, dan mendistribusikan ruang di antara item dalam container, bahkan ketika ukuran container atau item itu sendiri tidak diketahui atau dinamis.

Umumnya, audiens mengakses konten dari beragam perangkat, sehingga website membutuhkan sistem yang bisa dengan mudah menyesuaikan tampilannya di berbagai ukuran layar. Di sinilah flexbox berperan.

Flexbox memberikan fleksibilitas kepada developer untuk mengelola layout tanpa harus bergantung pada solusi tambahan yang sering kali membuat proses lebih rumit. Berbeda dengan pendekatan tradisional menggunakan float atau positioning, Flexbox menyediakan pendekatan yang lebih clean dan terstruktur.

Pada metode lama, menyusun elemen-elemen secara horizontal atau vertikal dengan rapi cukup sulit dilakukan, terutama bagi pemula. Tapi, flexbox membuat semua elemen bekerja berdasarkan aturan yang sama dari container tempat mereka berada, bukan berdasarkan ukuran atau aturannya sendiri.

Konsep Dasar Flexbox

Flexbox CSS memungkinkan kamu untuk membuat sistem layout yang lebih fleksibel dan responsif. Berikut beberapa konsep dasar yang perlu kamu pahami tentang flexbox:

Flex containers

Flex container adalah elemen dasar dalam flexbox. Saat kamu menetapkan sebuah elemen sebagai flex container ( menggunakan display: flex atau display: inline-flex), semua elemen anak dari elemen tersebut menjadi flex item.

Flex container membantu mengatur, menyelaraskan, dan menentukan ruang antara berbagai item di dalamnya menggunakan properti flexbox.

Flex items

Flex item adalah elemen-elemen yang berada di dalam flex container. Salah satu hal unik dari Flexbox adalah kamu memiliki kontrol besar atas bagaimana item ini harus tumbuh, menyusut, dan bagaimana harus diselaraskan terhadap satu sama lain.

Properti-properti seperti flex-grow, flex-shrink, dan flex-basis bisa dipakai untuk mengontrol ukuran dan ruang yang diambil oleh berbagai item ini.

Main axis and cross axis

Flexbox bekerja berdasarkan dua sumbu: sumbu utama (main axis) dan sumbu lintang (cross axis).

Sumbu utama adalah arah di mana flex item diletakkan secara berurutan di dalam container. Sedangkan sumbu lintang adalah sumbu yang tegak lurus terhadap sumbu utama.

Properti flex-direction dalam flex container akan menentukan arah sumbu utama dan secara tidak langsung juga sumbu lintang. Arah ini bisa vertikal (dalam kolom) atau horizontal (dalam baris).

Penyelarasan (alignment)

Flexbox menyediakan serangkaian properti untuk memudahkan menyelaraskan item, baik di sumbu utama maupun lintang. Properti seperti align-items, align-self, justify-content, dan align-content memungkinkan kamu mengontrol penyelarasan ini.

Fleksibilitas (Flexibility)

Flex item bisa diatur agar "tumbuh" atau "menyusut" untuk mengisi ruang yang tersedia di flex container. Artinya, di container yang memiliki ruang ekstra, item dapat diatur untuk memperluas ukurannya. Sementara di container yang terlalu penuh, item bisa diatur untuk menyusut.

Properti Penting dalam Flexbox CSS

Berikut beberapa properti dalam flexbox CSS yang sering digunakan:

#1 Display

Display adalah titik awal dai flexbox. Dengan menetapkan value flex atau inline-flex pada properti display suatu elemen, kamu mengubahnya menjadi flex container yang berarti elemen anaknya menjadi flex item.

#2 Flex-direction

Properti ini menentukan arah di mana flex item diletakkan dalam flex container. Kamu bisa memilih row (value default dari flex-direction) untuk layout horizontal atau column untuk layout vertikal.

Ada juga opsi row-reverse dan column-reverse jika kamu ingin item tersebut ditampilkan dalam urutan terbalik.

#3 Justify-content

Properti justify-content dipakai untuk menentukan bagaimana flex item harus didistribusikan di sepanjang sumbu utama container. Properti ini berguna untuk penyelarasan dan penyeimbangan ruang antar item.

Value yang bisa diterapkan termasuk flex-start (value default dari justify-content), flex-end, center, space-between, space-around, dan space-evenly.

#4 Align-items

Jika justify-content bekerja pada main axis, align-items fokus pada cross axis.

Properti ini berguna untuk mengatur posisi item secara vertikal (atau horizontal, tergantung arah flex). Kamu bisa memilih value seperti flex-start  (value default dari align-items), flex-end, center, baseline, atau stretch untuk mengontrol bagaimana item tersebut diselaraskan dan mendistribusikan ruang yang tersedia.

#5 Flex-grow, flex-shrink, dan flex-basis

Ketiga properti ini bekerja bersama untuk menentukan bagaimana flex item tumbuh dan menyusut relatif terhadap yang lain dalam flex container.

flex-grow mengontrol bagaimana item memanfaatkan ruang tambahan, flex-shrink menentukan bagaimana item berkurang saat ruang terbatas, dan flex-basis menetapkan ukuran dasar item sebelum mendistribusikan ruang tambahan.

Cara dan Contoh Menggunakan Flexbox

Bayangkan kamu memiliki sebuah container dengan tiga elemen atau item di dalamnya. Kamu ingin menampilkan ketiga item ini secara horizontal dengan jarak yang sama antara setiap item dan urutan tertentu.

Berikut langkah-langkah yang bisa dilakukan:

Langkah 1: tentukan container flex

Pertama, tentukan flex container dengan menambahkan properti display: flex; pada elemen container di CSS. Cara ini mengubah elemen container menjadi flex container dan item di dalamnya menjadi flex item.

Kode HTML:

Kode CSS:

Langkah 2: atur arah dan jarak item

Untuk mengatur distribusi dan jarak antar item, pakai properti justify-content. Jika tujuannya adalah menyamakan jarak antara setiap item, kamu bisa mengatur value dari properti ini menjadi space-between.

Namun, jika kamu mencari lebih banyak kontrol atas jarak spesifik antara masing-masing item, gunakan properti gap. Dengan gap, kamu dapat menentukan jarak eksak dalam piksel (px), relative em (rem), atau em, memberikan fleksibilitas lebih dalam desain.

Sementara itu, untuk arah item, Flexbox dapat dengan mudah mengatur item (yang dalam kasus ini disusun secara horizontal). Kamu harus memastikan properti flex-direction diatur ke row (ini adalah value default).

Langkah 3: kontrol urutan item (opsional)

Flexbox memberikan kebebasan untuk mengubah urutan tampilan item tanpa mengubah struktur HTML. Gunakan properti order pada item tertentu untuk menentukan urutannya. Nilai lebih rendah berarti item akan ditampilkan lebih dulu.

Dengan kode di atas, "Item 3" akan muncul pertama, diikuti oleh "Item 1" dan "Item 2".

Langkah 4: buat layout lebih responsif dengan flex-wrap

Agar layout lebih responsif, terutama ketika berhadapan dengan screen space yang terbatas, tambahkan properti flex-wrap. Properti ini memastikan elemen-elemen di dalam flex container dapat menyesuaikan diri dengan ukuran layar berbeda, sehingga menjaga kejelasan dan aksesibilitas website di berbagai perangkat.

FAQ (Frequently Asked Question)

Dapatkah menggunakan flexbox bersama dengan teknik layout CSS lainnya?

Dengan semua kelebihannya, flexbox dapat digunakan bersamaan dengan teknik layout CSS lainnya (seperti CSS grid) untuk membuat desain yang lebih kompleks sekaligus responsif. Misalnya, CSS grid dipakai untuk menata struktur dasar halaman, sementara flexbox membantu dalam menyelaraskan konten di dalam header, footer, atau komponen sidebar.

Penutup

Flexbox CSS muncul sebagai solusi revolusioner dalam desain web, mengatasi tantangan layout menggunakan metode yang lebih intuitif dan fleksibel.

Di artikel ini, kita telah mengungkap banyak kelebihan flexbox, mulai dari kemampuannya untuk mengubah container menjadi ruang dinamis bagi elemen anak sampai pemanfaatan properti khusus yang mengatur, menyelaraskan, dan mendistribusikan item secara presisi.