1. Atribut align-self mendefinisikan perataan item fleksibel satu per satu dalam arah sumbu samping (sumbu vertikal).
2. align-self memiliki tambahan auto (nilai default), yang mewakili nilai atribut align-items yang diwarisi dari wadah fleksibel.
Contoh
.wadah{
/* Mendefinisikan wadah fleksibel */
tampilan: fleksibel;
/*
Mengatur arah susunan elemen-elemen di dalam wadah baris: menentukan arah susunan dari kiri ke kanan baris-mundur: dari kanan ke kiri kolom: dari atas ke bawah kolom-mundur: dari bawah ke atas
*/
arah fleksibel: baris;
/*
Mengatur perataan elemen dalam wadah pada regangan sumbu silang: Jika tinggi elemen tidak diatur, tinggi elemen akan diregangkan hingga setinggi wadah (default)
flex-start: Menuju posisi awal (atas/kiri) pada sumbu silang. Align flex-end: Menuju posisi akhir (bawah/kanan) pada sumbu silang. Alignment center: Garis dasar perataan terpusat: Pastikan teks berada di dalam elemen berada pada waktu yang sama. Garis dasar (pastikan setiap teks berada pada baris yang sama)
*/
menyelaraskan-item: garis dasar;
tinggi: 800upx;
warna latar belakang: #FFC0CB;
}
.txt{
ukuran font: 20 piksel;
lebar: 150upx;
tinggi: 150upx;
}
.merah{
warna latar: merah;
/*
Tulis ulang perataan elemen dalam wadah pada sumbu silang otomatis: Default, menunjukkan pewarisan properti align-items dari elemen induk stretch: Ketika tinggi elemen tidak disetel, tinggi elemen akan diregangkan ke sama tinggi sebagai wadah (default)
flex-start: Menuju posisi awal (atas/kiri) pada sumbu silang. Align flex-end: Menuju posisi akhir (bawah/kanan) pada sumbu silang. Alignment center: Garis dasar perataan terpusat: Pastikan teks berada di dalam elemen berada pada waktu yang sama. Garis dasar (pastikan setiap teks berada pada baris yang sama)
*/
menyelaraskan-diri: tengah;
}
.hijau{
warna latar belakang: hijau;
}
.biru{
warna latar belakang: biru;
}Di atas adalah pengenalan atribut align-self di CSS, semoga bermanfaat bagi semuanya.