Align Items dan Align Self

Kalau justify-content mengurus main axis, pasangannya di cross axis adalah align-items : properti container yang menentukan bagaimana items diposisikan melintang, sekaligus mengatur siapa yang direntangkan. Properti ini bekerja setiap saat — tinggi items yang “kebetulan seragam” pada layout kita selama ini sebenarnya adalah karya nilai default stretch. Untuk pengecualian pada satu item saja, align-self ditulis di item dan menimpa align-items. Pada Chapter ini kita membedah kelima nilai align-items lalu memakai align-self untuk membuat satu pengecualian.

stretch: Nilai Default yang Merekatangkan #

Nilai default align-items adalah stretch: item yang tingginya auto direntangkan mengikuti tinggi cross axis container. Contoh kerja kita memakai papan setinggi 120px; bilah di dalamnya tidak punya deklarasi height, sehingga tinggi computed-nya menjadi 120px persis. Syaratnya dua: tinggi item memang auto, dan item tidak menetapkan align-self sendiri.

.papan-stretch {
  display: flex;               /* align-items default: stretch */
  width: 600px;
  height: 120px;
  background: rgb(241, 245, 249);
}
.papan-tengah {
  display: flex;
  align-items: center;         /* semua item di tengah cross axis */
  width: 600px;
  height: 120px;
  background: rgb(241, 245, 249);
}
.bilah {
  width: 140px;
  height: 40px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 40px;
}
.bilah-stretch {
  width: 140px;                /* height auto: direntangkan container */
  background: rgb(94, 234, 212);
  color: rgb(15, 118, 110);
  font-weight: 700;
  padding: 8px;
}
.khusus {
  align-self: flex-end;        /* menimpa align-items untuk item ini saja */
  background: rgb(251, 146, 60);
}

Mari kita telaah bagian-bagian pentingnya:

1. .papan-stretch: tidak mendeklarasikan align-items sama sekali, sehingga nilai default stretch berlaku dan bilah di dalamnya setinggi 120px.
2. .papan-tengah (align-items: center): bilah 40px dipusatkan secara vertikal; sisa 80px ruang terbagi 40px di atas dan 40px di bawah.
3. .bilah vs .bilah-stretch: bilah biru punya height: 40px sehingga tidak ikut stretch; bilah hijau membiarkan height auto dan justru menikmati penujukan container.
4. .khusus (align-self: flex-end): milik salah satu bilah di papan tengah; nilai ini menimpa center milik container, sehingga bilah oranye menempel ke tepi bawah.

HTML pendampingnya menyusun dua papan utama plus dua papan perbandingan:

<div class="papan-tengah">
  <div class="bilah">Normal</div>
  <div class="bilah khusus">align-self: flex-end</div>
  <div class="bilah">Normal</div>
</div>

Hasil di Browser:

Papan stretch: dua bilah hijau direntangkan setinggi 120px mengikuti
container (computed width 140px, height 120px).
Papan tengah: align-items center — bilah biru 40px berada di tengah vertikal,
sedangkan bilah oranye menimpa dengan align-self flex-end sehingga menempel
ke tepi bawah papan.
Papan baseline: garis dasar teks 14px dan 28px berada pada satu garis.
Papan ujung: align-items flex-end menempelkan bilah ke tepi bawah.
Nilai computed yang diperiksa harness: align-items papan tengah = center,
align-self bilah oranye = flex-end, tinggi bilah stretch = 120px.

center, flex-start, flex-end, dan baseline #

Selain stretch, ada empat nilai yang menempatkan item berdasarkan tinggi aslinya:

Tiga nilai pertama berperilaku seperti dugaan. Nilai baseline lebih khusus: browser mencari garis dasar (baseline) teks baris pertama setiap item, lalu menyamakan semua garis dasar tersebut. Hasilnya, label berukuran 14px dan judul berukuran 28px tampak “duduk” pada garis yang sama — penjajaran yang sulit dicapai manual dengan margin.

align-self: Pengecualian untuk Satu Item #

Properti align-self hanya boleh ditulis pada flex item, dan menerima nilai yang sama dengan align-items plus satu nilai tambahan auto. Nilai auto (default-nya) berarti “ikuti align-items milik container”; nilai lainnya langsung menimpa. Pola yang lazim di produksi: container memakai align-items: center untuk mayoritas items, lalu satu elemen — badge, tombol tutup, atau ikon — diberi align-self: flex-end agar menempel ke dasar baris.

Kombinasi align-items dan align-self menuntaskan penjajaran cross axis. Sisa satu pertanyaan besar pada layout nyata: apa yang terjadi ketika items tidak muat dalam satu baris — dijawab Chapter Flex Wrap .

.papan-stretch {
  display: flex;               /* align-items default: stretch */
  width: 600px;
  height: 120px;
  background: rgb(241, 245, 249);
}
.papan-tengah {
  display: flex;
  align-items: center;         /* semua item di tengah cross axis */
  width: 600px;
  height: 120px;
  background: rgb(241, 245, 249);
}
.bilah {
  width: 140px;
  height: 40px;
  background: rgb(14, 165, 233);
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-align: center;
  line-height: 40px;
}
.bilah-stretch {
  width: 140px;                /* height auto: direntangkan container */
  background: rgb(94, 234, 212);
  color: rgb(15, 118, 110);
  font-weight: 700;
  padding: 8px;
}
.khusus {
  align-self: flex-end;        /* menimpa align-items untuk item ini saja */
  background: rgb(251, 146, 60);
}