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:


  Item 1
  Item 2
  Item 3