Alignment artinya mengatur di mana item flex berdiri di dalam container-nya: mepet kiri, di tengah, atau di bawah. Flexbox punya dua arah. Sumbu utama adalah arah barisan item (di flex biasa, kiri ke kanan), dan sumbu silang memotongnya (atas ke bawah). justify-content mengatur posisi item di sumbu utama, align-items di sumbu silang.
🧪 Tebakan cepat: container diberi
flex-direction: column. Sekarangalign-items: centermenaruh item di tengah kiri-kanan atau di tengah atas-bawah? Tebak dulu, jawabannya ada di bagian "Susun ke bawah dengan flex-direction: column".
Atas, tengah, bawah dengan align-items
.container {
display: flex;
align-items: center;
height: 150px;
}
display: flexbikin semua anak.containerberjejer ke samping dalam satu baris.height: 150pxbikin container lebih tinggi dari item-itemnya, jadi ada ruang kosong di atas dan di bawah.align-items: centermenaruh tiap item di tengah tinggi itu.
Hasilnya, kotak-kotaknya mengambang di tengah, dengan jarak sama di atas dan di bawah. Ganti nilainya, kotaknya pindah:
flex-start: nempel ke atas.flex-end: nempel ke bawah.stretch: nilai bawaan. Item yang gak punyaheightditarik setinggi container.baseline: garis bawah teks tiap item dibikin sejajar, walau ukuran hurufnya beda.
Tepat di tengah: justify-content dan align-items
justify-content bekerja di sumbu utama: flex-start (kiri), center (tengah), flex-end (kanan), atau space-between (item pertama dan terakhir mepet pinggir, sisanya dibagi rata). Gabungkan dengan align-items, kotak bisa ditaruh tepat di tengah:
.container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
justify-content: center menaruh kotak di tengah kiri-kanan, align-items: center di tengah atas-bawah. Dua-duanya ditulis di container, elemen pembungkus yang punya display: flex, bukan di kotaknya. text-align: center gak cukup: dia cuma menengahkan teks di dalam kotak, bukan kotaknya.
Susun ke bawah dengan flex-direction: column
.container {
display: flex;
flex-direction: column;
align-items: center;
}
flex-direction: column bikin item bertumpuk dari atas ke bawah. Sumbunya ikut berputar: sumbu utama sekarang atas-bawah, sumbu silang kiri-kanan. Jadi di sini align-items: center menaruh kotak-kotaknya di tengah kiri-kanan, berderet ke bawah. Itu jawaban tebakannya.
Turun baris dengan flex-wrap, beri jarak dengan gap
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
Bawaannya, flex memaksa semua item tetap di satu baris, walau item-itemnya jadi menyempit. flex-wrap: wrap membolehkan item yang gak muat pindah ke baris baru. gap: 16px memberi jarak 16px di antara item, ke samping maupun ke bawah.
⚠️ Jebakan yang sering ketemu
- Container gak punya tinggi. Tanpa
height, container cuma setinggi isinya, jadialign-items: centerkelihatan gak ngapa-ngapain. - Properti ditulis di kotaknya.
justify-contentdanalign-itemsditulis di container, bukan di item. - Lupa sumbunya berputar. Di
flex-direction: column,justify-contentmengatur atas-bawah danalign-itemsmengatur kiri-kanan. align-contentdikira sama denganalign-items.align-contentmengatur jarak antar baris, jadi baru kerja kalau adaflex-wrap: wrapdan itemnya lebih dari satu baris.
💡 Satu item boleh beda sendiri. Tulis
align-selfdi item itu, misalnyaalign-self: flex-end. Nilainya menimpaalign-itemscuma buat item tersebut.
TL;DR: justify-content mengatur posisi item di sumbu utama, align-items di sumbu silang, dua-duanya ditulis di container. display: flex; justify-content: center; align-items: center; menaruh kotak tepat di tengah. flex-direction: column menyusun item ke bawah dan memutar kedua sumbunya. flex-wrap: wrap bikin item turun baris, gap memberi jarak.
