CSS FLEXBOX - PANDUAN LENGKAP MEMBUAT LAYOUT WEBSITE

Saat pertama belajar membuat website, saya menggunakan CSS float untuk membuat layout website yang cukup sulit diatur karena harus mengatur posisi elemen satu per satu.

Sekarang, Kamu bisa menggunakan CSS Flexbox untuk membuat layout website yang responsive dengan mudah!

Kalau kamu ingin belajar membuat website dari nol, ikuti kelas membuat website dengan HTML dan CSS

Demo CSS Flexbox

Contoh penggunaaan flexbox untuk membuat layout website yang responsive.

Manfaat CSS Flexbox

• Membuat layout website
• Membuat layout responsive
• Mengatur setiap elemen secara detail: posisi, lebar dan jaraknya

Apa itu CSS Flexbox

CSS Flexbox adalah sebuah teknik CSS untuk membuat layout website dengan mudah. Flexbox memungkinkan kita untuk mengatur posisi, lebar dan jarak setiap elemen secara detail.

Seperti namanya, kamu bisa berpikir bahwa elemen-elemen website kamu adalah kotak kotak (box) yang fleksibel!

Konsep dasar Flexbox

Klik tombol “aktifkan flexbox” di bawah dan lihat apa yang terjadi

.container {
  display: block;
}

Saat flex digunakan, maka elemen-elemen di dalamnya akan menjadi kotak kotak (box) yang menyamping layaknya display inline-block.

Flex container dan Flex item

Bagian penting dari mengerti flexbox adalah: ada “pembungkus” dan “isi” dari flexbox itu sendiri.

• Pembungkus, istilahnya adalah flex container
• Isi, istilahnya adalah flex item

Flex container adalah sebuah elemen yang memiliki properti display: flex. Elemen ini akan menjadi wadah dari elemen-elemen lainnya yang akan kita atur posisinya.

Pada contoh di atas:

• Garis putih adalah flex container-nya.
• Kotak-kotak kuning adalah flex item-nya.

Mengatur posisi horizontal

Kamu bisa mengatur posisi flex item secara horizontal dengan properti justify-content

.container {
  display: flex;
  justify-content: flex-start;
}

Tabel opsi nilai dan keterangan

Mengatur posisi vertical

Kamu bisa mengatur posisi flex item secara vertical dengan properti align-items. Untuk mendemokan ini, kita aka membuat kotak punya berbeda tinggi.

.container {
  display: flex;
  align-items: normal;
}

Table opsi nilai dan keterangan

Dengan kemampuan mengontrol posisi setiap itemnya, secara horizontal dan vertical, maka kita bisa membuat layout sebebas yang kita butuhkan!

Flex direction

Flexbox punya dua arah: horizontal dan vertical. Secara default, flexbox akan mengatur posisi horizontal seperti yang sudah kita lihat. Kamu bisa mengatur posisi vertical dengan properti flex-direction.

.container {
  flex-direction: row; /* atau column */
}

Saat menggunakan column maka kotak akan disusun secara vertical.

Nilai dari align-items dan justify-content akan bertukar sesuai dengan arah yang ditentukan oleh flex-direction.

Membuat menu navigasi responsive dengan flexbox

Berikut contoh membuat menu navigasi responsive memanfaatkan flexbox.

Coba untuk mengecil dan membesarkan ukuran demo di bawah.

Pada contoh ini:

• Ada dua “flex container”. Header dan Nav (Kita bisa meletakkan flex di dalam flex)
• Kita mengubah header yang sebelumnya flex ke samping, menjadi flex column pada saat ukuran layar kecil. Sehingga nama website dan navigasi jadi bersusun ke bawah
• Sama dengan di atas, kita membuat navigasi a menjadi flex column pada saat ukuran layar kecil.

Mengatur urutan item

Jika ingin membalik urutan item, kamu bisa menggunakan flex-direction: column-reverse atau flex-direction: row-reverse.

Untuk mengatur urutan item secara detail, kamu bisa menggunakan properti order.
Nilai defaultnya adalah 0. Semakin besar nilainya, maka semakin bawah posisinya.

Contoh saya mengubah order box pertama pada css, menjadi urutan ke 3.

Kenapa mengatur urutan berguna ?

Saya pribadi merasakan manfaatnya saat membuat menu navigasi responsive. Di mana misalnya:

• Pada ukuran desktop, sidebar di sebelah kiri, dan konten di sebelah kanan.
• Normalnya pada ukuran mobile, saat item tersusun secara vertical: sidebar di atas, dan konten di bawah.
• Tapi saya ingin konten di atas, dan sidebar di bawah. Di sini saya bisa menggunakan order untuk mengatur urutan itemnya.

Referensi

• Referensi CSS Flexbox
• CSS Flexbox - MDN
• Interactive Guide to flexbox - Joshwcomeau