Dua properti perataan tersisa sering terlewat karena keduanya butuh kondisi khusus untuk terlihat bekerja. align-content hanya bereaksi ketika item terbagi ke beberapa baris; align-self baru terasa ketika satu item perlu menyingkir dari aturan kawan-kawannya. Padahal justru situasi-situasi itulah yang muncul terus dalam layout nyata — galeri kartu bertingkat dan satu ikon keranjang yang posisinya beda sendiri di menu.
align-content: Mengatur Baris, Bukan Item #
align-items meratakan item di dalam barisnya masing-masing. align-content bekerja satu tingkat di atasnya: mendistribusikan baris-baris itu sendiri di sepanjang cross axis container. Nilai-nilainya akrab karena mengikuti pola justify-content:
| Nilai | Perilaku antar baris |
|---|---|
stretch (default) | Baris meregang mengisi sisa tinggi container |
flex-start | Baris menumpuk di awal cross axis |
flex-end | Baris menumpuk di akhir cross axis |
center | Baris berkumpul di tengah |
space-between | Baris pertama di awal, terakhir di akhir, sisa di antara |
space-around / space-evenly | Ruang di sekitar baris / semua jarak sama besar |
Dua syarat membuatnya bereaksi, dan meleset dari salah satunya menjadi penyebab keluhan “align-content saya tidak berfungsi” — keluhan yang hampir selalu berakhir di salah satu syarat berikut:
.galeri-wrap {
display: flex;
flex-wrap: wrap; /* syarat 1: item harus bisa multi-baris */
align-content: space-between;
height: 320px; /* syarat 2: cross axis harus lebih tinggi dari isi */
gap: 12px;
}Demo berikut memenuhi kedua syarat itu sekaligus menambahkan satu pengecualian align-self pada satu kotak:
Dengan container nowrap, semua item berada dalam satu baris — tidak ada jarak antar baris yang bisa didistribusikan. Dengan container tingginya pas-pasan terhadap isi, sisa ruangnya nol. Dalam dua kondisi itu align-content memang tidak punya pekerjaan, bukan sedang bermasalah.
Dengan seluruh properti perataan sudah diperkenalkan, peta tiga tingkatnya bisa dirangkum sekali untuk dipegang:
| Tingkat | Property | Berlaku pada | Syarat khas |
|---|---|---|---|
| Container, main axis | justify-content | Semua item | Ada ruang sisa |
| Container, cross axis | align-items | Item dalam barisnya | Selalu bekerja |
| Container, cross axis | align-content | Baris-baris hasil wrap | wrap + tinggi container lebih besar dari isi |
| Item | align-self | Satu item saja | Selalu bekerja |
align-self: Pengecualian per Item #
align-self adalah satu-satunya properti perataan yang ditulis pada flex item, bukan container. Fungsinya menimpa align-items untuk satu item tertentu:
.badge-promo {
align-self: flex-end; /* melawan default stretch milik container */
}Nilai yang tersedia sama dengan align-items — stretch, flex-start, flex-end, center, baseline — ditambah auto sebagai nilai default yang artinya “ikuti keputusan container”. Pola pemakaiannya umumnya dua:
- Satu item berbeda posisi: ikon keranjang di menu yang turun ke dasar barisnya, badge diskon yang menempel bawah kartu, atau tombol bantuan di ujung atas.
- Satu item berbeda besaran: item pendek yang tidak ikut meregang ketika kawan-kawannya memenuhi tinggi baris.
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
align-content tidak bereaksi sama sekali | Container nowrap atau tingginya pas dengan isi | Tambahkan flex-wrap: wrap dan tinggi eksplisit |
Baris jadi makin rapat setelah menulis align-content | Nilai stretch default sempat meregangkan baris | Sadari pergantian nilai; pilih pola space-* atau flex-start |
align-self menggeser item ke samping | Diharapkan bekerja di main axis | Untuk main axis, pakai margin auto pada item |
Ringkasan #
align-content mendistribusikan baris-baris hasil wrap di sepanjang cross axis, dengan syarat container benar-benar multi-baris dan lebih tinggi dari isinya; align-self memberi satu item kewenangan menimpa align-items dari container. Keduanya melengkapi peta perataan Flexbox yang kini utuh di ketiga level: container, baris, dan item. Tinggal satu aspek penataan yang belum rapi — jarak antar item dan antar barisnya, yang akan kita selesaikan dengan satu deklarasi gap.