Align Items

Jika justify-content menangani main axis, pasangannya align-items mengurusi cross axis — dan di sinilah dua fitur paling diapresiasi Flexbox berada: kartu yang tingginya otomatis sejajar, serta perataan vertikal yang dulu membutuhkan trik bertubi-tubi. Keduanya bermula dari satu perilaku default yang jarang disadari: stretch. Chapter ini membedah lima nilai align-items dan kapan masing-masing tepat dipakai.

Lima Nilai align-items #

Nilai	Perilaku di cross axis
`stretch` (default)	Item diregangkan mengisi tinggi barisnya
`flex-start`	Item menempel di awal cross axis (atas)
`flex-end`	Item menempel di akhir cross axis (bawah)
`center`	Item berada di tengah barisnya
`baseline`	Item diselaraskan pada garis dasar teks baris pertamanya

Nilai flex-start, flex-end, dan center mengikuti cross axis saat ini: pada flex-direction: row mereka bekerja vertikal, pada column menjadi mendatar. baseline bersifat khusus teks — berguna untuk baris yang mencampur ikon dan label agar hurufnya sejajar, bukan kotaknya:

css
.sel-harga {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.sel-harga .angka {
  font-size: 28px;
}
.sel-harga .satuan {
  font-size: 13px;
}

Demo berikut memperlihatkan angka besar dan kata kecil yang bertemu pada satu garis dasar teks:

stretch: Sumber Kartu Sejajar Tinggi #

Inilah rahasia di balik pertanyaan klasik “kenapa kartu-kartu saya beda tinggi?”. Container flex meregangkan setiap item sampai mengisi tinggi baris — dan tinggi baris ditentukan item dengan konten terpanjang:

css
.baris-kartu {
  display: flex;
  gap: 12px;
}
.baris-kartu .kartu {
  width: 150px;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}

Demo berikut membandingkan default stretch dengan align-items: center pada markup kartu yang identik:

Markup kartu pada kedua baris identik; yang membedakan hanya align-items: center dan tinggi baris eksplisit di baris kedua.

Ada satu syarat untuk mengingat: stretch hanya bekerja pada item tanpa besaran cross axis eksplisit. Begitu sebuah kartu diberi height (atau align-self sendiri, dibahas pada chapter berikutnya), kartu itu berhenti mengikuti baris dan sisanya tetap meregang di sekitarnya.

center: Solusi Centering Vertikal #

Menengahkan konten secara vertikal dulu membutuhkan tabel atau posisi dengan transform. Dengan Flexbox, cukup dua deklarasi — dan min-height sebagai panggungnya:

css
.hero-kecil {
  display: flex;
  justify-content: center;  /* tengah horizontal (main axis) */
  align-items: center;      /* tengah vertikal (cross axis) */
  min-height: 220px;
}

Pola dua properti ini muncul di mana-mana — banner, tombol dengan ikon, sel kartu — dan sebaiknya langsung melekat di kepala sebagai satu paket. Demo berikut menjalankan resepnya pada isi banner:

Perhatikan pembagian tugasnya: justify-content dan align-items masing-masing mengambil satu sumbu, persis seperti peta pada chapter Main Axis dan Cross Axis.

Mari kita telaah resep centering di atas:

display: flex: menjadikan .hero-kecil flex container dan kontennya flex item.
justify-content: center: mengumpulkan item di tengah main axis — pada arah default, tengah horizontal.
align-items: center: mengumpulkan item di tengah cross axis — tengah vertikal.
min-height: 220px: memberi panggung agar centering vertikal terlihat; tanpa tinggi kerja, centering pada container setinggi isi tidak menunjukkan efek.

Pola yang sama juga berlaku kebalikannya: container dengan height eksplisit membuat satu baris flex meregang hingga mengisinya, sehingga align-items: stretch menghasilkan item setinggi container — cara sederhana membuat banner atau baris aksi setinggi penuh.

Kesalahan Umum #

Gejala	Penyebab	Perbaikan
Kartu tidak lagi sejajar tingginya	Salah satu kartu diberi `height` eksplisit	Hapus `height` atau kunci tinggi baris lewat container
`align-items: center` menggeser mendatar, bukan vertikal	Container memakai `column`; cross axis pindah ke horizontal	Pakai `justify-content` untuk sumbu mendatar
Ikon dan label tampak miring sejajar atas	`flex-start` menyamakan tepi kotak, bukan teks	Pakai `baseline` agar garis dasar teks yang diselaraskan

Ringkasan #

align-items meratakan item di cross axis dengan stretch sebagai default — sumber otomatisnya kartu sejajar tinggi selama item tidak diberi tinggi eksplisit. Kombinasinya dengan justify-content: center menjadi resep centering dua dimensi yang menggantikan semua trik lama. Sisa pertanyaan perataan tinggal dua: bagaimana mengatur jarak antar baris hasil wrap, dan bagaimana memberi satu item pengecualian — jawabannya di align-content dan align-self.