CSS Flexbox untuk Pemula: Properti dan Contoh Kodenya

CSS flexbox adalah cara menyusun elemen di halaman web dalam satu arah, berjajar ke samping sebagai baris atau ke bawah sebagai kolom. Cukup pasang display: flex pada elemen induk, lalu kalian bisa mengatur jarak, perataan, dan ukuran semua elemen anaknya dari satu tempat.

Contoh CSS flexbox di artikel ini bisa langsung dicoba: simpan HTML dan CSS-nya dalam satu file, lalu buka di browser. Editor apa pun bisa dipakai, pilihannya ada di daftar aplikasi coding terbaik di PC dan laptop. Kalau kalian baru mulai belajar CSS, baca dulu pengertian dan cara menulis kode CSS supaya istilah seperti selektor dan properti tidak asing.

Apa itu CSS flexbox dan kapan dipakai

Nama resminya CSS Flexible Box Layout. CSS flexbox disebut tata letak satu dimensi karena hanya mengurus satu arah dalam satu waktu: baris atau kolom. Untuk tata letak dua dimensi, ketika baris dan kolom harus diatur bersamaan (misalnya galeri yang kolomnya harus lurus dari atas ke bawah), CSS Grid lebih cocok.

Flexbox pas untuk komponen yang isinya mengalir searah: menu navigasi, deretan tombol, kartu produk yang berjajar, atau satu elemen yang mau diletakkan tepat di tengah. Keduanya bisa dipakai bersama di satu halaman, misalnya grid untuk kerangka besar dan flexbox untuk isi tiap bagian.

Flex container dan flex item

Dalam CSS flexbox, elemen yang diberi display: flex disebut flex container. Anak langsungnya otomatis menjadi flex item. Cucunya tidak ikut, kecuali anak itu juga diberi display: flex.

<div class="wadah">
  <div class="kotak">1</div>
  <div class="kotak">2</div>
  <div class="kotak">3</div>
</div>

.wadah {
  display: flex;
}

Tanpa properti lain, ketiga kotak langsung berjajar dalam satu baris. Menurut MDN, ini perilaku bawaannya:

• item tersusun sebagai baris karena nilai awal flex-direction adalah row;
• item mulai dari tepi awal sumbu utama;
• item tidak melebar mengisi sisa ruang di sumbu utama, tetapi bisa menyusut;
• item meregang memenuhi tinggi container di sumbu silang (align-items berperilaku stretch);
• semua item dipaksa dalam satu baris karena nilai awal flex-wrap adalah nowrap.

Main axis dan cross axis

Semua properti CSS flexbox bekerja terhadap dua sumbu. Main axis (sumbu utama) adalah arah item disusun, ditentukan oleh flex-direction. Cross axis (sumbu silang) tegak lurus terhadapnya.

Dengan flex-direction: row, sumbu utama mendatar dan sumbu silang tegak. Untuk bahasa yang ditulis dari kiri ke kanan seperti bahasa Indonesia, tepi awalnya di kiri. Ganti ke column, dan keduanya bertukar: sumbu utama jadi tegak, sumbu silang jadi mendatar. Pahami ini dulu, karena justify-content selalu bekerja di sumbu utama dan align-items di sumbu silang.

Properti flex container

Properti di bagian ini dipasang pada elemen induk, yaitu .wadah pada contoh sebelumnya.

flex-direction

Menentukan arah sumbu utama. Nilainya row (bawaan), row-reverse, column, dan column-reverse. Contoh berikut menumpuk kotak dari atas ke bawah:

.wadah {
  display: flex;
  flex-direction: column;
}

flex-wrap

Bawaannya nowrap, jadi semua item dipaksa tetap satu baris walau tidak muat. Dengan wrap, item yang tidak muat pindah ke baris berikutnya. Pada contoh ini, kalau lebar container kurang dari 600px, kotak ketiga turun ke baris kedua:

.wadah {
  display: flex;
  flex-wrap: wrap;
}

.kotak {
  width: 200px;
}

Properti flex-flow menggabungkan keduanya, misalnya flex-flow: row wrap;.

justify-content

Mengatur pembagian ruang kosong di sumbu utama. Nilai yang sering dipakai: flex-start, center, flex-end, space-between (item pertama dan terakhir menempel ke tepi, sisanya berjarak sama), space-around (ruang di kedua ujung setengah dari jarak antaritem), dan space-evenly (semua jarak, termasuk ke tepi, sama besar).

.wadah {
  display: flex;
  justify-content: space-between;
}

align-items

Meratakan semua item di sumbu silang. Nilainya antara lain stretch (bawaan), flex-start, center, flex-end, dan baseline (rata garis dasar teks baris pertama). Contoh ini menaruh kotak di tengah tinggi container 200px:

.wadah {
  display: flex;
  align-items: center;
  height: 200px;
}

align-content

Mengatur jarak antarbaris item, bukan antaritem. Properti ini hanya berpengaruh kalau item dibolehkan turun baris (flex-wrap: wrap) dan tinggi container lebih besar dari yang dibutuhkan semua baris. Contoh ini mengumpulkan semua baris di bagian atas container:

.wadah {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 400px;
}

gap

Memberi jarak antaritem tanpa margin. Satu nilai berlaku untuk dua arah. Dua nilai berarti jarak antarbaris lebih dulu, lalu jarak antaritem dalam satu baris. Di sini 16px antarbaris dan 24px antaritem:

.wadah {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

Properti flex item

Properti berikut dipasang pada anak, bukan pada container.

flex-grow

Menentukan seberapa besar item ikut mengambil sisa ruang di sumbu utama. Nilai awalnya 0, artinya item tidak melebar. Pada contoh ini hanya kotak B yang diberi flex-grow: 1, jadi B mengambil semua sisa ruang dan A serta C tetap selebar isinya:

<div class="wadah">
  <div class="kotak">A</div>
  <div class="kotak lebar">B</div>
  <div class="kotak">C</div>
</div>

.wadah {
  display: flex;
}

.lebar {
  flex-grow: 1;
}

flex-shrink

Kebalikan dari flex-grow: menentukan seberapa besar item ikut menyusut ketika ruang kurang. Nilai awalnya 1 dan tidak boleh negatif. Nilai 0 membuat item menolak menyusut, berguna untuk logo atau ikon yang harus tetap utuh:

.logo {
  width: 120px;
  flex-shrink: 0;
}

flex-basis

Ukuran awal item di sumbu utama sebelum sisa ruang dibagi atau dikurangi. Nilai awalnya auto, yaitu memakai lebar atau isi item. Di sini setiap kotak mulai dari 150px:

.kotak {
  flex-basis: 150px;
}

Shorthand flex

Properti flex menggabungkan tiga properti di atas dengan urutan flex-grow, flex-shrink, flex-basis. MDN menyarankan memakai shorthand ini daripada menulis ketiganya terpisah. Nilai yang paling sering ditemui:

• flex: 1 sama dengan 1 1 0, sehingga item berbagi ruang sama rata;
• flex: auto sama dengan 1 1 auto, item bisa melebar dan menyusut dari ukuran isinya;
• flex: none sama dengan 0 0 auto, item kaku dan tidak berubah ukuran;
• flex: initial sama dengan 0 1 auto, alias nilai bawaan.

.kotak {
  flex: 1;
}

order

Mengubah urutan tampil item. Nilai awal semua item 0. Item dengan nilai lebih besar tampil lebih belakang, dan item bernilai sama mengikuti urutan di HTML. Aturan ini memindahkan kotak pertama ke paling akhir:

.kotak:first-child {
  order: 1;
}

align-self

Versi align-items untuk satu item saja. Nilainya sama, ditambah auto yang kembali mengikuti container. Di sini semua kotak rata atas, kecuali kotak terakhir yang turun ke bawah:

.wadah {
  display: flex;
  align-items: flex-start;
  height: 200px;
}

.kotak:last-child {
  align-self: flex-end;
}

Tabel ringkas properti CSS flexbox

Properti	Dipasang di	Nilai umum	Efek
display	container	flex	anak langsung jadi flex item
flex-direction	container	row, column	arah sumbu utama
flex-wrap	container	nowrap, wrap	item boleh turun baris atau tidak
justify-content	container	center, space-between	ruang kosong di sumbu utama
align-items	container	stretch, center	posisi item di sumbu silang
align-content	container	flex-start, space-between	jarak antarbaris saat item turun baris
gap	container	16px	jarak antaritem dan antarbaris
flex-grow	item	0, 1	bagian sisa ruang yang diambil
flex-shrink	item	1, 0	ikut menyusut atau tidak
flex-basis	item	auto, 200px	ukuran awal di sumbu utama
flex	item	1, 1 1 240px	shorthand grow, shrink, basis
order	item	0, -1, 1	urutan tampil
align-self	item	auto, center	posisi satu item di sumbu silang

Tiga contoh tata letak dengan CSS flexbox

Menu navigasi horizontal

Logo di kiri, tautan menu di kanan. Kuncinya margin-right: auto pada logo: margin otomatis menghabiskan semua sisa ruang di sumbu utama, sehingga tautan lain terdorong ke kanan. Kode warna #1e293b di bawah bisa kalian ganti dengan kode warna CSS lain.

<nav class="menu">
  <a href="/" class="logo">NamaSitus</a>
  <a href="/artikel">Artikel</a>
  <a href="/tentang">Tentang</a>
  <a href="/kontak">Kontak</a>
</nav>

.menu {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px;
  background: #1e293b;
}

.menu a {
  color: #ffffff;
  text-decoration: none;
}

.logo {
  margin-right: auto;
  font-weight: bold;
}

Elemen di tengah layar

justify-content: center memusatkan secara horizontal, align-items: center secara vertikal. Container butuh tinggi, di sini min-height: 100vh atau setinggi layar. Margin bawaan body dihapus supaya halaman tidak memunculkan scroll.

<div class="layar">
  <div class="pesan">Halo!</div>
</div>

body {
  margin: 0;
}

.layar {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Deretan kartu yang turun baris di layar kecil

Setiap kartu punya lebar dasar 240px (belum termasuk padding dan border), melebar mengisi baris, dan turun ke baris berikutnya ketika layar menyempit. Di layar HP biasanya tersisa satu kartu per baris, tanpa media query.

<div class="daftar-kartu">
  <article class="kartu">Kartu 1</article>
  <article class="kartu">Kartu 2</article>
  <article class="kartu">Kartu 3</article>
  <article class="kartu">Kartu 4</article>
</div>

.daftar-kartu {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.kartu {
  flex: 1 1 240px;
  padding: 16px;
  border: 1px solid #cccccc;
  border-radius: 8px;
}

Ada satu efek samping: kartu di baris terakhir ikut melebar memenuhi baris, jadi bisa lebih lebar dari kartu di atasnya. Kalau semua kartu harus sama lebar dan kolomnya lurus, itu tanda kalian butuh CSS Grid.

Kesalahan umum saat memakai CSS flexbox

• Mengira justify-content selalu horizontal. Properti ini mengikuti sumbu utama, jadi setelah flex-direction: column, ia mengatur posisi vertikal.
• Memasang align-content pada container satu baris. Tanpa flex-wrap: wrap, properti ini tidak berpengaruh apa-apa.
• Memusatkan vertikal tanpa memberi tinggi. Container yang tingginya mengikuti isi tidak punya ruang lebih, jadi align-items: center terlihat tidak bekerja.
• Memakai order untuk menyusun ulang tombol atau tautan. Urutan tampilnya berubah, tetapi urutan Tab di keyboard tetap mengikuti HTML, sehingga membingungkan pengguna keyboard. Lebih aman mengubah urutan di HTML-nya.
• Memasang display: flex pada elemen yang ingin diatur posisinya. Yang diberi display: flex adalah induknya, karena hanya anak langsung yang menjadi flex item.

Daftar lengkap nilai setiap properti ada di panduan konsep dasar flexbox di MDN Web Docs, dokumentasi yang juga menjadi rujukan artikel ini.