CSS flexbox adalah metode menyusun elemen di halaman web dalam satu arah, berderet ke samping sebagai baris maupun ke bawah sebagai kolom. Cukup pasang display: flex pada elemen induk, kemudian 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, kemudian 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 dahulu pengertian dan metode menulis kode CSS agar 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 cuma mengurus satu arah dalam satu waktu: baris maupun kolom. Untuk tata letak dua dimensi, ketika baris dan kolom mesti diatur berbarengan (misalnya galeri yang kolomnya mesti lurus dari atas ke bawah), CSS Grid lebih cocok.
Flexbox pas untuk elemen yang isinya mengalir searah: menu navigasi, deretan tombol, kartu produk yang berjajar, maupun satu elemen yang mau diletakkan tepat di tengah. Keduanya bisa dipakai berbareng 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 berderet dalam satu baris. Menurut MDN, ini perilaku bawaannya:
- item tersusun sebagai baris karena harga mula flex-direction adalah row;
- item mulai dari tepi mula 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 harga mula 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 horizontal 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 bagiankecil 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 statis satu baris meski tidak muat. Dengan wrap, item yang tidak muat pindah ke baris berikutnya. Pada contoh ini, jika 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 separuh dari rentang 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 alas teks baris pertama). Contoh ini meletakkan kotak di tengah tinggi container 200px:
.wadah { display: flex; align-items: center; height: 200px; } align-content
Mengatur rentang antarbaris item, bukan antaritem. Properti ini cuma berpengaruh jika item dibolehkan turun baris (flex-wrap: wrap) dan tinggi container lebih besar dari yang dibutuhkan semua baris. Contoh ini mengumpulkan semua baris di bagiankecil atas container:
.wadah { display: flex; flex-wrap: wrap; align-content: flex-start; height: 400px; } gap
Memberi rentang antaritem tanpa margin. Satu harga berjalan untuk dua arah. Dua harga berarti rentang antarbaris lebih dulu, kemudian rentang 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 memungut sisa ruang di sumbu utama. Nilai awalnya 0, artinya item tidak melebar. Pada contoh ini cuma kotak B yang diberi flex-grow: 1, jadi B memungut semua sisa ruang dan A serta C statis 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 membikin item menolak menyusut, berguna untuk logo maupun ikon yang mesti statis utuh:
.logo { width: 120px; flex-shrink: 0; } flex-basis
Ukuran mula item di sumbu utama sebelum sisa ruang dibagi maupun dikurangi. Nilai awalnya auto, yaitu memakai lebar maupun 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 beku dan tidak berubah ukuran;
- flex: initial sama dengan 0 1 auto, alias harga bawaan.
.kotak { flex: 1; } order
Mengubah urutan tampil item. Nilai mula semua item 0. Item dengan harga lebih besar tampil lebih belakang, dan item bermutu 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 balik 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 maupun 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 maupun tidak |
| flex-basis | item | auto, 200px | ukuran mula 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 maupun setinggi layar. Margin antaran body dihapus agar 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 alas 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 mesti sama lebar dan kolomnya lurus, itu tanda kalian butuh CSS Grid.
Kesalahan lazim 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 kelihatan tidak bekerja.
- Memakai order untuk menyusun ulang tombol maupun tautan. Urutan tampilnya berubah, tetapi urutan Tab di keyboard statis mengikuti HTML, sehingga membingungkan pelanggan keyboard. Lebih terlindungi mengubah urutan di HTML-nya.
- Memasang display: flex pada elemen yang mau diatur posisinya. Yang diberi display: flex adalah induknya, karena cuma anak langsung yang menjadi flex item.
Daftar komplit harga setiap properti ada di panduan konsep alas flexbox di MDN Web Docs, dokumentasi yang juga menjadi rujukan artikel ini.
