ALIGN-SELF

Dalam pembuatan tata letak halaman web, properti CSS align-self memiliki peranan penting dalam penyejajaran objek atau elemen. Properti ini adalah penerapan cara yang ringkas dan fleksibel untuk mengontrol penyejajaran elemen sepanjang sumbu lintang dari elemen kontainer.

Penggunaan Dasar align-self

Secara umum, kamu bisa menggunakan properti align-self untuk meratakan satu elemen individu daripada semua elemen lain dalam kontainernya. Nilai default dari align-self adalah auto, yang berarti elemen akan mengikuti nilai align-items dari elemen kontainernya.

Berikut ini adalah contoh penggunaan dasar dari align-self:

.container {
  display: flex;
  align-items: center;
}

.item {
  align-self: flex-start;
}

Dalam contoh di atas, semua elemen di dalam .container akan secara default berada di tengah (center) karena align-items, kecuali .item yang akan berada di atas (flex-start) karena align-self.

Nilai-nilai Properti align-self

Ada lima nilai yang bisa digunakan dalam align-self, sama seperti align-items:

• auto: Nilai ini akan membuat elemen mengikuti nilai align-items dari kontainer induk.
• flex-start: Elemen akan merapat ke awal kontainer.
• flex-end: Elemen akan merapat ke ujung kontainer.
• center: Elemen akan berada di tengah-tengah kontainer.
• baseline: Elemen akan berada pada garis dasar kontainer.
• stretch: Elemen akan meregang untuk mengisi seluruh kontainer.

Contoh Penggunaan Beragam Nilai align-self

Mari kita lihat bagaimana align-self bekerja dengan beragam nilainya dalam praktek:

.container {
  display: flex;
  align-items: flex-start;
}

.item1 {
  align-self: auto;    /* Ikuti nilai dari kontainer */
}

.item2 {
  align-self: flex-end; /* Pindah ke bawah kontainer */
}

.item3 {
  align-self: center;   /* Elemen berada di tengah kontainer */
}

.item4 {
  align-self: baseline; /* Elemen berada pada garis dasar kontainer */
}

.item5 {
  align-self: stretch;  /* Elemen akan meregang mengisi kontainer */
}

Dengan menguasai align-self, kamu memiliki lebih banyak kontrol dalam mendesain dan meratakan elemen dalam halaman web. Selamat mencoba!